@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校驗(yàn), 項(xiàng)目開發(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', // 匹配本機(jī)IP地址(默認(rèn)是0.0.0.0)
port: 8989, // 開發(fā)服務(wù)器運(yùn)行端口號
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ù)進(jìn)行優(yōu)化)
config.plugins.delete('prefetch')
// 移除 preload 插件(針對生產(chǎn)環(huán)境首屏請求數(shù)進(jìn)行優(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ù)進(jìn)行壓縮
deleteOriginalAssets: false // 是否刪除原文件 (原文件也建議發(fā)布到服務(wù)器以支持不兼容gzip的瀏覽器)
})],
performance: { // 生產(chǎn)環(huán)境構(gòu)建代碼文件超出以下配置大小會在命令行中顯示警告
hints: 'warning',
// 入口起點(diǎn)的最大體積 整數(shù)類型(以字節(jié)為單位,默認(rèn)值是:250000 (bytes))
maxEntrypointSize: 5000000,
// 生成文件的最大體積 整數(shù)類型(以字節(jié)為單位,默認(rèn)值是: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)我們需要自己再單獨(dú)定義一些配置時,只需在項(xiàng)目根目錄下創(chuàng)建vue.config.js,然后在這個文件里面添加配置即可。
但是在項(xiàng)目中發(fā)現(xiàn)更改vue.config.js的內(nèi)容后并沒有起到任何效果
解決
每次更新完vue.config.js停掉熱部署(npm run serve),然后再重新開啟服務(wù)。
目錄結(jié)構(gòu):

vue.config.js配置示例:

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
關(guān)于在vue-cli中使用微信自動登錄和分享的實(shí)例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動登錄和分享的實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
Vue開發(fā)過程中遇到的疑惑知識點(diǎn)總結(jié)
vue是法語中視圖的意思,Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點(diǎn),有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

