VUE路由组件懒加载方法

VUE路由组件懒加载方法

1、使用VUE-CLI脚手架做项目的情况下；
2、在build文件下的webpack.base.conf.js文件
3、在 output:中添加一句 chunkFilename: ‘chunk[id].js?[chunkhash]’,

  output: {
    
    
    path: config.build.assetsRoot,
    filename: '[name].js',
     chunkFilename: 'chunk[id].js?[chunkhash]', //路由组件懒加载核心之一，必须添加
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

4、在router文件夹中修改index.js

{
    
    
      path: '/',
      name: 'navbar',
      component:resolve=>require(['../components/public/navbar.vue'],resolve)//路由组件懒加载方法之一。resolve方法
    },