記一次vue采坑 npm run dev 過程:component: () => import() 出現錯誤


第一次接觸VUE,今天為了跑通公司項目,着實費了不少勁。

主要起因是命令:

npm run dev 

在編譯過程中報錯:Syntax Error: Unexpected token (4:19)

 

 原來是import這兒報錯了,這就需要babel的插件了,vue-router官網上有一段提示:
如果您使用的是 Babel,你將需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語法。

運行命令:

npm install babel-plugin-syntax-dynamic-import --save-dev

然后修改webpack的js的loader部分:

 

{

test: /\.js$/,

loader:'babel-loader',

options:{

plugins:['syntax-dynamic-import']

},

},

增加了option選項,至此,能識別我們:const App = () => import('../component/Login.vue');的語法。

 

我的代碼是從gitlab clone下來的,執行

npm install

npm run dev
這時報錯 Error: No PostCSS Config found in... 

解決方案

在項目根目錄新建postcss.config.js文件,並對postcss進行配置:

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}

 

 

好了 試試

npm run dev

至此,問題全部解決了。

項目為什么上傳到 GitHub 之后,再 clone 下來,再運行就得單獨寫一個 postcss.config.js 的文件並配置一下呢?

在npm上查到的postcss配置在webpack.config.js,
postcss.config.js是針對webpack3.0做的特殊處理

 

 

 

 


免責聲明!

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



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