问题

vue 项目可以正常启动运行，但是使用 vuecli3 打包时却 js 报错，项目里使用了 html2canvas 跟 jspdf，然后打包里面使用了 uglifyjs-webpack-plugin。

原因跟解决方案

因为 uglifyjs-webpack-plugin 不支持新的 es6 语法，解决方法就是使用 [email protected] 替换 [email protected] 即可。

vue.config.js 的 [email protected] 配置

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      config.optimization.minimizer = [
        new UglifyJsPlugin({
    
    
          uglifyOptions: {
    
    
            output: {
    
    
              comments: true, // 删除注释
            },
            warnings: false,
            compress: {
    
    
              drop_console: true,
              drop_debugger: true, // 删除debugger
              pure_funcs: ["console.log"],
            }
          }
        })
      ];
    }
}

改成 vue.config.js 的 [email protected] 配置，注意这里需要用 4.x 版本的

const TerserPlugin = require("terser-webpack-plugin");

configureWebpack: config => {
    
    
  if (process.env.NODE_ENV === 'production') {
    
    
    config.optimization.minimize = true;
    config.plugins.push(
      new TerserPlugin({
    
    
        test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
        parallel: true, // 使用多进程并发运行
        terserOptions: {
    
    
          // Terser 压缩配置
          output: {
    
     comments: false },
          compress: {
    
    
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          }
        }
      })
    );
  }
}