问题
vue 项目可以正常启动运行,但是使用 vuecli3 打包时却 js 报错,项目里使用了 html2canvas 跟 jspdf,然后打包里面使用了 uglifyjs-webpack-plugin
。
原因跟解决方案
因为 uglifyjs-webpack-plugin
不支持新的 es6 语法,解决方法就是使用 terser-webpack-plugin@4.2.3
替换 uglifyjs-webpack-plugin@2.2.0
即可。
vue.config.js
的 uglifyjs-webpack-plugin@2.2.0
配置
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
的 terser-webpack-plugin@4.2.3
配置,注意这里需要用 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'] } } }) ); } }