vue-router 按需加載
vue的單頁(yè)面(SPA)項(xiàng)目,必然涉及路由按需的問(wèn)題。
以前我們是這么做的
//require.ensure是webpack里面的,這樣做會(huì)將單獨(dú)拉出來(lái)作為一個(gè)chunk文件
const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));
但現(xiàn)在vue-router的官網(wǎng)看看,推薦這種方式:
//vue異步組件和webpack的【代碼分塊點(diǎn)】功能結(jié)合,實(shí)現(xiàn)了按需加載
const App = () => import('../component/Login.vue');
可是,很多情況下,我們這么寫npm run dev控制臺(tái)直接報(bào)錯(cuò),這是為什么呢?
Module build failed: SyntaxError: Unexpected token
原來(lái)是import這兒報(bào)錯(cuò)了,這就需要babel的插件了,vue-router官網(wǎng)上有一段提示:
如果您使用的是 Babel,你將需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語(yǔ)法。
至此,問(wèn)題全部解決了。
如果使用vue-cli生成項(xiàng)目,很可能在babel-loader沒(méi)有配置上面的插件,這時(shí)需要我們自己去安裝此插件:
cnpm install babel-plugin-syntax-dynamic-import --save-dev
然后修改webpack的js的loader部分:
{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:['syntax-dynamic-import']
},
},
增加了option選項(xiàng),至此,能識(shí)別我們:
const App = () => import('../component/Login.vue');
的語(yǔ)法了,頁(yè)面出來(lái)了:

在打包的時(shí)候,發(fā)現(xiàn)我們?nèi)绻皇沁@么寫,出現(xiàn)的chunk包名字都是亂的,如果我們指定命名,該怎么辦呢?webpack3提供了Magic Comments(魔法注釋)
const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');
這樣我們就為打包出來(lái)的chunk指定一個(gè)名字,最終生成login.js的chunk包。

浙公網(wǎng)安備 33010602011771號(hào)