实现路由懒加载

实现路由懒加载

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')

标签：vue,Roles,Rights,实现,plugin,User,import,路由,加载
来源： https://blog.csdn.net/weixin_41481695/article/details/114416948