欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue打包報錯Unexpected token: punc的問題

 更新時間:2020年10月24日 09:49:43   作者:峰豆豆  
這篇文章主要介紹了解決vue打包報錯Unexpected token: punc的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

項目中有一個功能模塊是使用Vue寫的,然后蛋疼的來了,寫Vue的同事走了,今天需要改,懵逼狀態(tài)啊,這是什么?代碼還沒看懂,就給我出了一個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項目,拷貝.babelrc文件到原項目根目錄下

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

最后找到了一個大神的回復(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.此時npm run build, ok了。

貼個完整的圖片:

補充知識:webpack 打包時,代碼壓縮,刪除console與注釋

如下所示:

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

uglifyJsPlugin 用來對js文件進(jìn)行壓縮,減小js文件的大小。其會拖慢webpack的編譯速度,建議開發(fā)環(huán)境時關(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
      }
     }
   })
  ]
  }
 }

運行出現(xiàn)報錯 UglifyJs

DefaultsError: warnings is not a supported option

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

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

相關(guān)文章

  • 解決vue數(shù)組中對象屬性變化頁面不渲染問題

    解決vue數(shù)組中對象屬性變化頁面不渲染問題

    今天小編就為大家分享一篇解決vue數(shù)組中對象屬性變化頁面不渲染問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue-cli3+typescript初體驗小結(jié)

    vue-cli3+typescript初體驗小結(jié)

    這篇文章主要介紹了vue-cli3+typescript初體驗小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • Vue官方推薦AJAX組件axios.js使用方法詳解與API

    Vue官方推薦AJAX組件axios.js使用方法詳解與API

    axios是Vue官方推薦AJAX組件,下面為大家介紹axios.js庫的詳細(xì)使用方法與API介紹
    2018-10-10
  • vue-cli3 取消eslint校驗代碼的解決辦法

    vue-cli3 取消eslint校驗代碼的解決辦法

    這篇文章主要介紹了vue-cli3 取消eslint校驗代碼的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • vue中使用element ui的彈窗與echarts之間的問題詳解

    vue中使用element ui的彈窗與echarts之間的問題詳解

    這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問題詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • Vue3中父子傳參常見方式及用法

    Vue3中父子傳參常見方式及用法

    在 Vue 3 中,父子組件之間進(jìn)行通信有多種方式,下面簡單介紹下常見的方式及其用法和使用場景,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2024-01-01
  • vue3中的hooks總結(jié)

    vue3中的hooks總結(jié)

    這篇文章主要介紹了vue3中的hooks總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)

    vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)

    這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • rollup打包vue組件并發(fā)布到npm的方法

    rollup打包vue組件并發(fā)布到npm的方法

    這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)

    vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)在線預(yù)覽pdf文件和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11

最新評論