vue如何根据路由划分模块

发布于 2022-09-12 22:09:47 字数 1766 浏览 12 评论 0

根据学到的一些知识,了解到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)无效

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

星軌x 2022-09-19 22:09:47

已经解决,具体做法如下

  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 {
    // ..
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文