解决vue打包报错UglifyJs
报错
ERROR in js/xxxxxx.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [js/chunk-3068
产生
在vue配置中，由于各插件版本兼容性差异可能会引发此问题的产生。 UglifyJs是一款可以解析、混淆、压缩JS的工具，此处的UglifyJs是配置在脚手架/webpack中，运行在node环境中的小插件。关于UglifyJs：
uglify-js@3具有简化的API和CLI，该API和CLI与不能向后兼容uglify-js@2。
UglifyJS 2.x版本的文档可以在这里找到。
glify-js 仅支持JavaScript（ECMAScript 5）。
要缩小ECMAScript 2015或更高版本，请使用Babel之类的工具进行翻译。
解决
低版本：
原因：UglifyJs不支持ES6语法，因此报错。
解决方案：项目根目录下创建文件
.babelrc，配置如下
{
"pressets": ["es2015"]
}
高版本：
原因1：UglifyJs版本过低
解决方案：升级UglifyJs版本
npm install uglify-js -g
原因2: babel 转译问题
解决方案：找到babel的配置项
transpileDependencies，如下操作：
// 旧
transpileDependencies: [
/* string or regex */
],
// 改为如下⬇️
// 新
transpileDependencies: [
'vue-particles',
'animejs'
],
重新打包
npm run build，完毕。
附
[email protected] vue.config.js配置混淆压缩代js及去除console(缺少的插件先安装上)
// 去除console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// 压缩css、js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 要压缩的文件
const productionGzipExtensions = ['js', 'css'];
module.exports = {
// something else codes
configureWebpack: (config) => {
// 如果不是开发环境
if (env !== 'development') {
// 代码压缩
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8,
}));
// 打包后清除断点和控制台打印
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true, // 注释debugger
drop_console: true, // 注释console
pure_funcs:['console.log'] // 移除console
},
},
sourceMap: false, // 去除打包后生成的.map文件
parallel: true,
}),
);
}
},
}
希望能够解决您的问题。