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