最近对以前的一个
vue项目进行迭代,之前编译和打包都正常,然后有半年没动过此项目,结果遇到的问题是:
可以正常启动,可是打包的时候运行npm run build就报错,报错信息如下图所示:
为方便查询,现将报错信息复制如下:
ERROR in static/js/0.c82c8d0933d549b8fdae.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/_d3-cloud@1.2.7@d3-cloud/index.js:91,0][static/js/0.c82c8d0933d549b8fdae.js:1724,9]
ERROR in static/js/vendor.2410c45cc1a76d3ec97f.js from UglifyJs
Unexpected token: punc (}) [./node_modules/_v-viewer@1.7.4@v-viewer/dist/index.es.js:568,0][static/js/vendor.2410c45cc1a76d3ec97f.js:136385,2]
Build failed with errors.
解决方案:
需要修改前端文件夹下的build/webpack.base.conf.js文件,
修改如下:
// 修改前
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')],
},
]
}
// 修改后
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('/node_modules/_d3-cloud@1.2.7@d3-cloud'), resolve('/node_modules/_v-viewer@1.7.4@v-viewer/dist')],
},
]
}
即将报错的两个文件放在include中,路径的对应方式如下图:
之后再次执行 npm run build, build 成功。
解决问题的过程中,了解到原因:
由于
UglifyJs只支持ES5而引入的 ui框架 中可能引入了一部分ES6的写法,所以导致webpack打包失败。