Vue打包報錯Unexpected token: punc(()解決方案


(用vscode)vue項目打包時,報錯,報錯信息如下:

ERROR in static/js/0.564c764efc3ecf31190c.js from UglifyJs
Unexpected token: punc (() [App.vue?4b081dc6:15,0][static/js/0.564c764efc3ecf31190c.js:89,9]

ERROR in static/js/1.ba486a70bd6d5d196b1f.js from UglifyJs
Unexpected token: punc (() [App.vue?9b59fb70:15,0][static/js/1.ba486a70bd6d5d196b1f.js:89,9]

ERROR in static/js/2.b1b899693213f2c6f714.js from UglifyJs
Unexpected token: punc (() [App.vue?7ead9007:15,0][static/js/2.b1b899693213f2c6f714.js:89,9]

ERROR in static/js/3.613c709f19726f9e3b15.js from UglifyJs
Unexpected token: punc (() [App.vue?616ee6a1:15,0][static/js/3.613c709f19726f9e3b15.js:96,9]

ERROR in static/js/app.7ab13f69749abe73cfa7.js from UglifyJs
Unexpected token: name (date) [./src/js-app/helper/DateUtil.js:9,4][static/js/app.7ab13f69749abe73cfa7.js:78,4]

 

原因:上面的代碼是es6的語法,由於現在還有瀏覽器不支持es6的語法,所以在打包的過程中要把es6轉換成es5,在打包時使用了UglifyJs壓縮JS,但是UglifyJs無法解析ES6,才出現了上述問題。

  • 網上查詢解決方案,但是這個方案並沒有解決我的問題。這個方案是:打開build/webpack.base.config.js 文件,resolve部分加入該報錯文件
 {
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('src'), resolve('test'), resolve('/src/js-app/helper/DateUtil.js')] },
  • 正確的解決方案:

1.在工程目錄下新建.babelrc文件,注意文件類型選擇File就可以了

2.文件加入下列內容

 
         
{
"presets": [

["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {

"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}

截圖如下:

3.此時npm run build, ok了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM