解決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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue打包報錯:ERROR in static/js/xxx.js from UglifyJs undefined問題
- 用electron打包vue項目中的報錯問題及解決
- 關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報錯問題
- vue打包靜態(tài)資源后顯示空白及static文件路徑報錯的解決
- vue打包npm run build時候界面報錯的解決
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
- 解決vue打包后刷新頁面報錯:Unexpected token <
- vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯
- 打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc'
相關(guān)文章
Vue官方推薦AJAX組件axios.js使用方法詳解與API
axios是Vue官方推薦AJAX組件,下面為大家介紹axios.js庫的詳細(xì)使用方法與API介紹2018-10-10vue中使用element ui的彈窗與echarts之間的問題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問題詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)在線預(yù)覽pdf文件和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11