Webpack2 + Vue2 + Vue-Router2 如何实现懒加载?

webpack2 的中 System.import 方法将被弃用, 推荐改成以下写法:
https://www.mmxiaowu.com/article/5848239bd4352863efb55469
正常写法

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 },
]
})

支持分组的写法

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 },
]
})