(轉)Webpack2 + Vue2 + Vue-Router2 如何實現懶加載?

webpack2 的中 System.import 方法將被棄用, 推薦改爲如下寫法:

https://www.mmxiaowu.com/article/5848239bd4352863efb55469

1. 正常寫法

const centerHome = resolve => require(['../pages/home/center-home.vue'], resolve) const centerInfo = resolve => require(['../pages/home/center-info.vue'], resolve) const centerShop = resolve => require(['../pages/home/center-shop.vue'], resolve) const router = new VueRouter({ mode: 'hash', base: __dirname, scrollBehavior, routes: [ { name:'center-home', path: '/center/home', component: centerHome }, { name:'center-info', path: '/center/info', component: centerInfo }, { name:'center-shop', path: '/center/shop', component: centerShop }, ] }) 

1. 支持分組的寫法

const centerHome = r => require.ensure([], () => r(require('../pages/home/center-home.vue')), 'center') const centerInfo = r => require.ensure([], () => r(require('../pages/home/center-info.vue')), 'center') const centerShop = r => require.ensure([], () => r(require('../pages/home/center-shop.vue')), 'center') const router = new VueRouter({ mode: 'hash', base: __dirname, scrollBehavior, routes: [ { name:'center-home', path: '/center/home', component: centerHome }, { name:'center-info', path: '/center/info', component: centerInfo }, { name:'center-shop', path: '/center/shop', component: centerShop }, ] }) 

---

昨天將一個vue 1.0的手機端項目升級全面升級到2.0 (webpack, vue, vue-router, vuex), 發現懶加載不能用了

查資料後發現, 主要緣由是webpack的升級

在webpack1時代, 路由配置裏, 懶加載是這麼寫的:

// vue1 '/group/log': { name: 'grouplog', component(resolve) { require(['./components/group/group-log.vue'], resolve) } } // vue2 const Foo = resolve => require(['./Foo.vue'], resolve) const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) ` 

可是到webpack2後, webpack修改了api, (準確來講是: webpack2 已經支持原生的 ES6 的模塊加載器了)因此您須要這麼寫: (相關資料)

// vue1 const Question = () => System.import('./components/question/index.vue') // 中間代碼省略 '/group/log': { name: 'grouplog', component: Question } // vue2 const Question = () => System.import('./components/question/index.vue') const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/question/:id', component: Question }, ] })