vue如何根据路由划分模块
根据学到的一些知识，了解到webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：
import('./app'+path+'/util') => /^./app.*/util$/ 上述import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。
现在假如有以下几个文件，关于多页面vue配置这里假设已经都搭建完成，多个htmlwebpackplugin，多个entry，执行spawnSync执行 shell语句等等，现在假设控制台输入node build a或node build b来生成的dist文件。预想尝试通过设置webpack的process.env.NODE_MODULE来require不同模块分路由打包，因为路由是根据后台数据动态生成，通过后端menu来映射前端文件路径行程路由
_import_a.js 代表a号系统，里面包括属于自己的main函数，app.vue, index.html，还有其他好多开发的页面等等
module.exports = file => import(/* webpackChunkName: "[request]" */ 'views/a' + file + '.vue')_import_b.js 代表b号系统，里面包括属于自己的main函数，app.vue, index.html，还有其他好多开发的页面等等
module.exports = file => import(/* webpackChunkName: "[request]" */ 'views/a' + file + '.vue')router.js
const _import = require('_import_' + process.env.NODE_MODULE)
function traverseMenu(menu) {
if(menu == null || menu.length === 0) {
return [];
}
return menu.map((item) => {
return {
path: item.path,
component: () => _import(item.component),
name: item.name,
icon: item.icon,
meta: item.meta,
chidren: traverseMenu(menu.children)
}
})
}
Router.addRoutes(traverseMenu(menu));但是打包出来的每次都是所有，有没有好的解决办法，感谢赐教
后续尝试
- 使用switch-case或者通过对象来map来获取无效
- 使用new Function('', 'return require('_import_' + process.env.NODE_MODULE)')()无效
- 使用eval('require')(_import_' + process.env.NODE_MODULE)无效
已经解决，具体做法如下
- 在vue-cli中使用
process.env.VUE_APP_MODULE_ENV, webpack可以在definePlugin中定义，但貌似没有效果，后续在研究 - 使用require和() => import都可以，关键是要确定你要打包文件路径不能有变量
- 最重要的一点，不要使用
const module = process.env.VUE_APP_MODULE_ENV的表达式，通过下面最朴素的表达式获取，不要使用switch-case
let _import
if(process.env.VUE_APP_MODULE_ENV === 'xx') {
// _import = () => import('@/modules/a/_import_a')
_import = require('@/modules/a/_import_a')
} else {
// ..
}