背景：參考Vue官方文件實現路由懶載入的時候遇到問題，具體文章請戳此處參考連結： Vue-loader官方網站

簡介：Vue 路由懶載入

首先，可以將非同步元件定義為返回一個 Promise 的工廠函式 (該函式返回的 Promise 應該 resolve 元件本身)：

const Foo = () => Promise.resolve({ /* 元件定義物件 */ })

第二，在 Webpack 2 中，我們可以使用動態 import語法來定義程式碼分塊點 (split point)：

import('./Foo.vue') // 返回 Promise

注意 如果您使用的是 Babel，你將需要新增 syntax-dynamic-import 外掛，才能使 Babel 可以正確地解析語法。

結合這兩者，這就是如何定義一個能夠被 Webpack 自動程式碼分割的非同步元件。

const Foo = () => import('./Foo.vue')

在路由配置中什麼都不需要改變，只需要像往常一樣使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

問題一：Cannot read property 'bindings' of null

Package.json:

"@babel/core": "^7.0.1",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.0.0",
 

Change

{ "presets": ["env"] } 

To

{ "presets": ["@babel/preset-env"] }

問題二：Error: vue-loader was used without the corresponding plugin

修改webpack的配置檔案

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    devtool: "sourcemap",
    entry: './js/entry.js', // 入口檔案
    output: {
        filename: 'bundle.js' // 打包出來的檔案
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module : {
        ...
    }
}
 

問題三：Module parse failed: Unexpected character '#'

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}