vue-cli3项目打包问题

Z时代
2024-01-10
分类：综合

vue

一：在哪配置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,
      }),
    );
  }
}