html模块划分,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 {

// ..

}

回答