实现路由懒加载

实现路由懒加载

1.安装 @bable/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import
2.在 bable.config.js配置文件中声明该插件

module.exports = {
    
    
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3.将路由改为按需加载的形式，如下：

/*括号中注释的部分是声明组件的分组*/
const User = () => import(/*webpackChunkName:'User_Rights_Roles' */ '../components/user/User.vue')
const Rights = () => import(/*webpackChunkName:'User_Rights_Roles' */ '../components/power/Rights.vue')
const Roles = () => import(/*webpackChunkName:'User_Rights_Roles' */ '../components/power/Roles.vue')