背景:參考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'
]
}