@vue/cli4.x版本的vue.config.js常用配置方式
@vue/cli4.x的vue.config.js常用配置
設(shè)置訪問端口號、訪問IP地址、跨域代理,路徑別名
const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安裝 function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // // 關(guān)閉eslint校驗, 項目開發(fā)中建議開啟。這個只是在特殊情況下方便測試時關(guān)閉 // devServer: { // overlay: { // warining: true, // errors: true, // }, // }, // lintOnSave: false, // 配置部署應(yīng)用包時的基本 URL(如果有需要,發(fā)現(xiàn)放到服務(wù)器上靜態(tài)資源路徑請求不對的情況可以看著修改) // publicPath: process.env.NODE_ENV === 'production' // ? '/winne-test/' // : '/' lintOnSave: 'error', // 設(shè)置eslint報錯時停止代碼編譯 productionSourceMap: false, // 不需要生產(chǎn)環(huán)境的 source map(減小dist文件大小,加速構(gòu)建) devServer: { open: true, // npm run serve后自動打開頁面 host: '0.0.0.0', // 匹配本機IP地址(默認是0.0.0.0) port: 8989, // 開發(fā)服務(wù)器運行端口號 proxy: { '/api': { target: 'http://www.exaple.com', // 代理接口地址 secure: false, // 如果是https接口,需要配置這個參數(shù) changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '' //需要rewrite的, 這里理解成以'/api'開頭的接口地址,把/api代替target中的地址 } } } }, chainWebpack: (config) => { // 移除 prefetch 插件(針對生產(chǎn)環(huán)境首屏請求數(shù)進行優(yōu)化) config.plugins.delete('prefetch') // 移除 preload 插件(針對生產(chǎn)環(huán)境首屏請求數(shù)進行優(yōu)化) preload 插件的用途:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload config.plugins.delete('preload') // 第1個參數(shù):別名,第2個參數(shù):路徑 (設(shè)置路徑別名) config.resolve.alias .set('@pages', resolve('./src/page')) .set('@router', resolve('./src/router')) .set('@store', resolve('./src/store')) .set('@utils', resolve('./src/utils')) }, // 配置打包 js、css文件為.gz格式,優(yōu)化加載速度 (參考:https://blog.csdn.net/qq_31677507/article/details/102742196) configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionPlugin({ test: /\.js$|\.css/, // 匹配文件 threshold: 10240, // 超過10kB的數(shù)據(jù)進行壓縮 deleteOriginalAssets: false // 是否刪除原文件 (原文件也建議發(fā)布到服務(wù)器以支持不兼容gzip的瀏覽器) })], performance: { // 生產(chǎn)環(huán)境構(gòu)建代碼文件超出以下配置大小會在命令行中顯示警告 hints: 'warning', // 入口起點的最大體積 整數(shù)類型(以字節(jié)為單位,默認值是:250000 (bytes)) maxEntrypointSize: 5000000, // 生成文件的最大體積 整數(shù)類型(以字節(jié)為單位,默認值是:250000 (bytes)) maxAssetSize: 3000000 // // 只給出 js 文件的性能提示 // assetFilter: function (assetFilename) { // return assetFilename.endsWith('.js') // } } } } } }
vue-cli4.*配置vue.config.js文件配置內(nèi)容不生效
使用vue-cli時系統(tǒng)會自動幫我們做好一些通用的配置,當(dāng)我們需要自己再單獨定義一些配置時,只需在項目根目錄下創(chuàng)建vue.config.js,然后在這個文件里面添加配置即可。
但是在項目中發(fā)現(xiàn)更改vue.config.js的內(nèi)容后并沒有起到任何效果
解決
每次更新完vue.config.js停掉熱部署(npm run serve),然后再重新開啟服務(wù)。
目錄結(jié)構(gòu):
vue.config.js配置示例:
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue mixin實現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10關(guān)于在vue-cli中使用微信自動登錄和分享的實例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動登錄和分享的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06vue+axios 前端實現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08