vue-cli3項目打包問題

一：在哪配置webpack

你需要在根目錄新建vue.config.js配置webpack。

二：如何在項目里知道是什么環境（測試或者生產）

項目里會有個.env或者以此開頭的文件，你可以在vue.config.js或者其他地方使用process.env訪問到此文件，此文件里就是你定義的一些變量。process.env.NODE_ENV

 

 三：加代理

module.exports = {
  // 它支持webPack-dev-server的所有選項
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號
    https: false, // https:{type:Boolean}
    open: true, //配置自動啟動瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理

    // 配置多個代理
    proxy: {
      "/api": {
        target: "http://172.22.12.28:30083/",
        // target: "http://172.23.40.202:30083/",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      "/api": {
        target: "http://172.22.12.28:30083/",
        // target: "http://172.23.40.202:30083/",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  },
  publicPath: './'
};

四：生產環境壓縮代碼和去掉console

// vue.config.js 配置說明
//官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions

module.exports = {
  // 它支持webPack-dev-server的所有選項
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號
    https: false, // https:{type:Boolean}
    open: true, //配置自動啟動瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理

    // 配置多個代理
    proxy: {
      "/api": {
        target: "http://172.22.12.28:30083/",
        // target: "http://172.23.40.202:30083/",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      "/api": {
        target: "http://172.22.12.28:30083/",
        // target: "http://172.23.40.202:30083/",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  },
  publicPath: './'
};

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const productionGzipExtensions = ['js', 'css'];

const env = process.env.NODE_ENV;
console.log(env);

configureWebpack: (config) => {
  if (env !== 'development' || env !== 'test') {
    config.plugins.push(new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
      threshold: 10240,
      minRatio: 0.8,
    }));
    config.plugins.push(
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_debugger: true, // console
            drop_console: true,
            pure_funcs: ['console.log'] // 移除console
          },
        },
        sourceMap: false,
        parallel: true,
      }),
    );
  }
}