解決vue打包報(bào)錯(cuò)Unexpected token: punc的問題

更新時(shí)間：2020年10月24日 09:49:43 作者：峰豆豆

這篇文章主要介紹了解決vue打包報(bào)錯(cuò)Unexpected token: punc的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

項(xiàng)目中有一個(gè)功能模塊是使用Vue寫的，然后蛋疼的來了，寫Vue的同事走了，今天需要改，懵逼狀態(tài)啊，這是什么？代碼還沒看懂，就給我出了一個(gè)Exception。記錄一下，蛋疼歷程。

ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs

Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19]

好看不？

各種百度啊，有人說，下載新的vue-cli，webpack項(xiàng)目,拷貝.babelrc文件到原項(xiàng)目根目錄下

然后再百度，怎么下載vue-cli，更刺激的來了，根本看不懂，一堆cmd，對于一個(gè)小白來說，簡直殘忍啊。

最后找到了一個(gè)大神的回復(fù)，懶惰的我，當(dāng)然選擇粘貼復(fù)制嘞。

解決方案：

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

2.cv大法（懶人專用）

{
 "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.此時(shí)npm run build, ok了。

貼個(gè)完整的圖片：

補(bǔ)充知識：webpack 打包時(shí)，代碼壓縮，刪除console與注釋

如下所示：

new webpack.optimize.UglifyJsPlugin({
      //刪除注釋
      output:{
        comments:false
      },
      //刪除console 和 debugger 刪除警告
      compress:{
        warnings:false,
        drop_debugger:true,
        drop_console:true
      }
    })

uglifyJsPlugin 用來對js文件進(jìn)行壓縮，減小js文件的大小。其會(huì)拖慢webpack的編譯速度，建議開發(fā)環(huán)境時(shí)關(guān)閉，生產(chǎn)環(huán)境再將其打開。

vue cli 3.0中, 在vue.config.js中配置

configureWebpack:{
  optimization: {
   minimizer: [
    new UglifyJsPlugin({
     uglifyOptions: {
      // 刪除注釋
      output:{
       comments:false
      },
      // 刪除console debugger 刪除警告
      compress: {
       warnings: false,
       drop_console: true,//console
       drop_debugger: false,
       pure_funcs: ['console.log']//移除console
      }
     }
   })
  ]
  }
 }

運(yùn)行出現(xiàn)報(bào)錯(cuò) UglifyJs

DefaultsError: warnings is not a supported option

降低版本(使用 "uglifyjs-webpack-plugin": "^1.1.1")，打包正常，效果達(dá)到

以上這篇解決vue打包報(bào)錯(cuò)Unexpected token: punc的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
打包

相關(guān)文章

vue數(shù)據(jù)初始化initState的實(shí)例詳解
Vue 實(shí)例在建立的時(shí)候會(huì)運(yùn)行一系列的初始化操作，而在這些初始化操作里面，和數(shù)據(jù)綁定關(guān)聯(lián)最大的是 initState。這篇文章主要介紹了vue數(shù)據(jù)初始化--initState,需要的朋友可以參考下
2019-04-04
vue調(diào)試工具沒有Pinia模塊的簡單解決辦法
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒有Pinia模塊的簡單解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex實(shí)現(xiàn)組件之間共享數(shù)據(jù)
這篇文章主要介紹了vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù),非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-04-04
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
vuejs簡單驗(yàn)證碼功能完整示例
這篇文章主要介紹了vuejs簡單驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了vue.js驗(yàn)證碼的生成、顯示、校驗(yàn)等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
在Vue項(xiàng)目中使用d3.js的實(shí)例代碼
這篇文章主要介紹了在Vue項(xiàng)目中使用d3.js的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值價(jià)值,需要的朋友可以參考下
2018-05-05
解決vue3+vite配置unplugin-vue-component找不到Vant組件
這篇文章主要為大家介紹了vue3+vite配置unplugin-vue-component找不到Vant組件問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件綁定原生事件相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08