ERROR in js/xxxxxx.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [js/chunk-3068
在vue配置中,由于各插件版本兼容性差异可能会引发此问题的产生。 UglifyJs
是一款可以解析、混淆、压缩JS的工具,此处的UglifyJs是配置在脚手架/webpack中,运行在node环境中的小插件。关于UglifyJs:
.babelrc
,配置如下{
"pressets": ["es2015"]
}
npm install uglify-js -g
transpileDependencies
,如下操作:// 旧
transpileDependencies: [
/* string or regex */
],
// 改为如下⬇️
// 新
transpileDependencies: [
'vue-particles',
'animejs'
],
npm run build
,完毕。
vue-cli@3.x 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,
}),
);
}
},
}
希望能够解决您的问题。