vue-cli -- 路由懒加载

最新推荐文章于 2023-09-18 11:29:44 发布

aina0674

最新推荐文章于 2023-09-18 11:29:44 发布

阅读量147

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/zjh-study/p/10653272.html

版权

一、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)
        }
    ]
})

转载于:https://www.cnblogs.com/zjh-study/p/10653272.html