@vue/cli4.x版本的vue.config.js常用配置方式

更新時間：2022年05月23日 11:19:27 作者：winne雪

這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

@vue/cli4.x的vue.config.js常用配置

設置訪問端口號、訪問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 = {
  // // 關閉eslint校驗, 項目開發(fā)中建議開啟。這個只是在特殊情況下方便測試時關閉
  // devServer: {
  //   overlay: {
  //     warining: true,
  //     errors: true,
  //   },
  // },
  // lintOnSave: false,
  // 配置部署應用包時的基本 URL（如果有需要，發(fā)現(xiàn)放到服務器上靜態(tài)資源路徑請求不對的情況可以看著修改）
  // publicPath: process.env.NODE_ENV === 'production'
  //   ? '/winne-test/'
  //   : '/'
  lintOnSave: 'error', // 設置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ā)服務器運行端口號
    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ù)：路徑  （設置路徑別名）
    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ā)布到服務器以支持不兼容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')
          // }
        }
      }
    }
  }
}