帶你玩轉vue——簡單高效的vue.config.js配置

通用的vue.config.js配置

module.exports = {
  publicPath: './',
  devServer: {
    port: 7004,
    disableHostCheck: true
  },
  assetsDir:'static',
  indexPath:"index.html",
  //
  lintOnSave: false,
  runtimeCompiler: true,
  productionSourceMap: false,
  css:{
    extract:true,
    sourceMap: false
    },
    //npm install --save-dev compression-webpack-plugin
    configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下載的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
  }
 

publicPath: ‘./’：改配置生效後，打包後的包可放在服務器下任何文件夾內！
devServer.port: 7004：開發環境下的運行端口，此端口非確定，如被佔用會自動加1，在生產環境下無效
assetsDir：是否將靜態資源整合，並聲明整合所在的文件夾
indexPath：index.html的輸出路徑，默認爲index.html
lintOnSave：保存的時候使用 eslint-loader 進行檢查。 有效的值：ture | false | "error" 當設置爲 "error" 時，檢查出的錯誤會觸發編譯失敗。
css.extract：是否將頁面中的css摘取出來生成一個css文件
configureWebpack：
npm install --save-dev compression-webpack-plugin 使用該命令安裝compression-webpack-plugin插件 並進行如上配置，webpack打包時會將js文件壓縮爲.gz文件，減少首屏加載時間，注意同時需要修改nginx配置文件nginx.conf：
#gzip on;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable “MSIE [1-6].”;