vue-cli -- 路由懒加载

一、import

export deafult new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('@/views/Home')
        }
    ]
})

// webpack打包到制定统一的文件中
export deafult new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import(/* webpackChunkName: 'myRouter' */'@/views/Home')
        }
    ]
})

// webpack.config.js配置:
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    chunkFilename: '[name].js', //以文件名为最终打包的名称
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }

二、resolve

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: resolve => require(["@/views/Home"], resolve)
        }
    ]
})

三、require.ensure()

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: require.ensure([], () => r(require('@/views/Home')), demo)
        }
    ]
})
posted @ 2019-04-04 10:02  不会代码的前端  阅读(446)  评论(0编辑  收藏  举报