import layoutHeaderAside from '@/layout/header-aside' export default { "layoutHeaderAside": layoutHeaderAside, "menu": () => import(/* webpackChunkName: "menu" */'@/pages/sys/menu'), "route": () => import(/* webpackChunkName: "route" */'@/pages/sys/route'), "role": () => import(/* webpackChunkName: "role" */'@/pages/sys/role'), "user": () => import(/* webpackChunkName: "user" */'@/pages/sys/user'), "interface": () => import(/* webpackChunkName: "interface" */'@/pages/sys/interface') }
如果添加一个 book 就需要在这里加上 "book": () => import(/* webpackChunkName: "book" */'@/pages/sys/book')
这一行内容也是可以通过配置模板来生成的，比如模板内容为：
"<$ model.name $>": () => import(/* webpackChunkName: "<$ model.name $>" */'@/pages<$ model.module $><$ model.name $>')
但是生成的内容怎么加到 index.js 中呢？
第一种方法：复制粘贴
第二种方法：
这部分的模板为 routerMapComponent.njk ：
export default { "<$ model.name $>": () => import(/* webpackChunkName: "<$ model.name $>" */'@/pages<$ model.module $><$ model.name $>') }
编译后文件保存到 routerMapComponents 目录下，比如 book.js
修改 index.js :
const files = require.context('./', true, /\.js$/); import layoutHeaderAside from '@/layout/header-aside' let componentMaps = { "layoutHeaderAside": layoutHeaderAside, "menu": () => import(/* webpackChunkName: "menu" */'@/pages/sys/menu'), "route": () => import(/* webpackChunkName: "route" */'@/pages/sys/route'), "role": () => import(/* webpackChunkName: "role" */'@/pages/sys/role'), "user": () => import(/* webpackChunkName: "user" */'@/pages/sys/user'), "interface": () => import(/* webpackChunkName: "interface" */'@/pages/sys/interface'), } files.keys().forEach((key) => { if (key === './index.js') return Object.assign(componentMaps, files(key).default) }) export default componentMaps
使用了 require.context
我目前也是使用了这种方法
第三种方法：
开发模板的时候，做特殊处理，读取原有 index.js 的内容，按行进行分割，在数组的最后一个元素之前插入新生成的内容，注意逗号的处理，将新数组内容重新写入 index.js 中，注意换行。
打个广告
如果你想要快速的创建一个 mock-server，同时还支持数据的持久化，又不需要安装数据库，还支持代码生成器的模板开发，欢迎试试lazy-mock 。