vue的單頁面（SPA）項目,必然涉及路由按需的問題。
以前我們是這么做的

//require.ensure是webpack里面的，這樣做會將單獨拉出來作為一個chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));

?但現在無Vue-router的官網看看，推薦這種方式：

//vue異步組件和webpack的【代碼分塊點】功能結合，實現了按需加載 const App = () => import('../component/Login.vue');

?可是，很多情況下，我們這么寫npm控制臺直接報錯，這是為什么呢？

Module build failed: SyntaxError: Unexpected token

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

如果使用vue-cli生成項目，很可能在babel-loader沒有配置上面的插件，這時需要我們自己去安裝此插件：

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

?然后修改js的loader部分：

{ test: /\.js$/, loader:'babel-loader', options:{ plugins:['syntax-dynamic-import'] }, },

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

?

在打包的時候，發現我們如果只是這么寫：const App = () => import('../component/Login.vue');出現的chunk包名字都是亂的，如果我們指定命名，該怎么辦呢？webpack3提供了Magic Comments（魔法注釋）

const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');

?這樣我們就為打包出來的chunk指定一個名字，最終生成login.js的chunk包。

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2') // 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。 const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')

?轉自：https://www.cnblogs.com/xiaochongchong/p/7772773.html

https://segmentfault.com/a/1190000011519350

轉載于:https://www.cnblogs.com/yunspider/p/9248795.html

總結

以上是生活随笔為你收集整理的vue-router 按需加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。