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