設置訪問端口號、訪問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 = {
lintOnSave: 'error', // 設置eslint報錯時停止代碼編譯
productionSourceMap: false, // 不需要生產環境的 source map(減小dist文件大小,加速構建)
devServer: {
open: true, // npm run serve後自動打開頁面
host: '0.0.0.0', // 匹配本機IP地址(默認是0.0.0.0)
port: 8989, // 開發服務器運行端口號
proxy: {
'/api': {
target: 'http://www.exaple.com', // 代理接口地址
secure: false, // 如果是https接口,需要配置這個參數
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的, 這裏理解成以'/api'開頭的接口地址,把/api代替target中的地址
}
}
}
},
chainWebpack: (config) => {
// 移除 prefetch 插件(針對生產環境首屏請求數進行優化)
config.plugins.delete('prefetch')
// 移除 preload 插件(針對生產環境首屏請求數進行優化) preload 插件的用途:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
config.plugins.delete('preload')
// 第1個參數:別名,第2個參數:路徑 (設置路徑別名)
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格式,優化加載速度 (參考: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的數據進行壓縮
deleteOriginalAssets: false // 是否刪除原文件 (原文件也建議發佈到服務器以支持不兼容gzip的瀏覽器)
})],
performance: { // 生產環境構建代碼文件超出以下配置大小會在命令行中顯示警告
hints: 'warning',
// 入口起點的最大體積 整數類型(以字節爲單位,默認值是:250000 (bytes))
maxEntrypointSize: 5000000,
// 生成文件的最大體積 整數類型(以字節爲單位,默認值是:250000 (bytes))
maxAssetSize: 3000000
// // 只給出 js 文件的性能提示
// assetFilter: function (assetFilename) {
// return assetFilename.endsWith('.js')
// }
}
}
}
}
}
vue-cli3/4配置gzip參考資料:
https://blog.csdn.net/qq_31677507/article/details/102742196
https://www.cnblogs.com/yangshifu/p/9724709.html
https://segmentfault.com/q/1010000012566339/
https://www.cnblogs.com/zs-note/p/9556390.html