vue将每个路由打包成html,vue项目功能菜单配置自动生成路由及代码切割

功能菜单配置自动生成路由及代码切割

菜单即路由，共享配置html

约定

views目录中存放业务组件；业务模块分文件夹存放，路由主组件使用index命名存放在以路由名的目录下。vue

views **业务组件

└── base 业务分组目录，对应router目录中的菜单组

├── about 业务功能

│ ├── index.vue 业务路由页面主组件

│ └── ...others.vue 相关的分块组件

├── welcome

│ └── index.vue

└── index.vue 子路由组件，在菜单开启子路由时可用

配置

每个配置文件对应一组菜单，文件名对应views下面的子目录，配置结构以下：webpack

// base.ts

const menu: IMenu = {

name: 'base', // 菜单名称，对应views目录下的子目录

title: '基本信息', // 菜单标题

isPath: true, // 是否为访问父路径，默认状况下菜单下的目录为一级路由，开启此项将读取目录下index.vue做为子路由组件，文件不存在时自动生成组件。

routes: [ // 菜单目录

{

name: 'about', // 菜单名称，对应路由名称

title: '关于', // 菜单标题，对应路由meta信息

filename: 'about', // 组件文件名