炫意html5
最早CSS3和HTML5移动技术网站之一

vue如何根据路由划分模块

根据学到的一些知识,了解到webpack会找到所有import()的调用,将传入的参数处理成一个正则,如:

import('./app'+path+'/util') => /^./app.*/util$/ 

上述import参数中的所有变量,都会被替换为【.*】,而webpack就根据这个正则,查找所有符合条件的包,将其作为package进行打包。


现在假如有以下几个文件,关于多页面vue配置这里假设已经都搭建完成,多个htmlwebpackplugin,多个entry,执行spawnSync执行 shell语句等等,现在假设控制台输入node build anode 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)无效

已经解决,具体做法如下

  1. 在vue-cli中使用process.env.VUE_APP_MODULE_ENV, webpack可以在definePlugin中定义,但貌似没有效果,后续在研究
  2. 使用require和() => import都可以,关键是要确定你要打包文件路径不能有变量
  3. 最重要的一点,不要使用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 {
// ..
}

回答

炫意HTML5 » vue如何根据路由划分模块

CSS3教程HTML5教程