記一次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作的特殊處理