在使用Linux打包Vue過程中,有時候會遇到一些報錯,在本文中我們將會詳細講解這些報錯的原因和解決方案。通常情況下,使用Vue打包時會先執行npm run build,生成dist文件夾,然后將dist文件夾中的文件復制到服務器中運行。在此過程中,可能會遇到以下問題:
在npm run build執行過程中報錯:
ERROR Failed to compile with 1 error error in ./src/xxx.js Syntax Error: Unexpected token (xxx: xx) @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
這個報錯通常發生在Vue項目中使用了ES6語法時。原因是Vue默認的babel-loader版本不支持ES6語法,需要使用babel-loader7進行轉碼。解決方案如下:
npm uninstall --save-dev babel-loader npm install --save-dev babel-loader@7
在打包過程中報錯:
ERROR Failed to compile with 5 errors These dependencies were not found: * core-js/fn/promise in ./src/xxx.js * core-js/fn/array/from in ./src/xxx.js * core-js/library/fn/promise in ./src/xxx.js * core-js/library/fn/array/from in ./src/xxx.js * vue in ./src/main.js To install them, you can run: npm install --save core-js/fn/promise core-js/fn/array/from core-js/library/fn/promise core-js/library/fn/array/from vue
這個報錯的原因是在Vue項目中使用了ES6語法,但是沒有安裝必要的依賴包。解決方案如下:
npm install --save core-js/fn/promise core-js/fn/array/from core-js/library/fn/promise core-js/library/fn/array/from vue
打包完成后運行時報錯:
Uncaught SyntaxError: Unexpected token< 或 404 (Not Found)
這種報錯通常發生在服務器環境中,原因是服務器沒有正確配置路由。解決方案如下:
在Nginx配置文件中添加location規則
server { # ... location / { try_files $uri $uri/ /index.html; } # ... }
在Vue中使用require引入圖標文件報錯:
ERROR in ./node_modules/_vue@2.5.22@vue/dist/vue.esm.js Module not found: Error: Can't resolve 'vue-loader/lib/component-normalizer' in '/Users/xxx/project' @ ./node_modules/_vue@2.5.22@vue/dist/vue.esm.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
這個報錯是由于缺少vue-loader依賴導致的,在安裝vue時一起安裝即可。解決方案如下:
npm install --save-dev vue-loader
在Linux打包Vue過程中,以上幾類報錯是比較常見的,以上解決方案可以解決大部分的問題。當然,有時候我們還是需要花費一些時間來debug找到問題,但是我們要記住一個原則:任何報錯背后都有一個問題,通過解決這個問題得以解決報錯。希望這份文檔能夠幫助到你。
上一篇maven中下載vue
下一篇python 生成樹算法