vue 路由懒加载问题

Question

请问一下 ，如何改写成懒加载路由

Answer 1

1、方法一：ES6的import()方法 [推荐]

利用import 的方法进行懒加载，注意  / webpackChunkName: "group-foo" /  为魔法注释，可将重命名打包后文件的名字，如果名字一致路由，最后打包到一个文件中。

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') }
  ]
})

2、方法二：require()方法

 利用resolve 的方法，如下所示

const router = new VueRouter({
  routes: [
    { path: '/foo', component:resolve=>(require(["./Foo.vue"],resolve)) }
 ]
})

3、方法三：异步组件+webpack的ensure()方法

const router = new VueRouter(
  routes: [
    { path: '/foo', component: r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') }
 ]
})

注意：在以上的基础上，webpack.prod.conf.js 中的需要改成如下配置：

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')   **// 此处的name如果改为id则不能按文件夹名字进行打包**
  },