若依框架前端打包部署后出错(动态路由懒加载文件失败)

问题:

一开始我们的项目是能够正常打包部署的，但是前段时间突然出现部署后，动态路由的页面无法正常显示的情况，报错信息如下

就很离奇，因为一开始是能够正常部署的，但是突然出现这个情况了

初步排查:

        一开始，我猜测可能是因为代码问题导致的，于是我将代码回退到一个月前，部署后还是相同的错误，因此排除代码问题，那除了代码问题，多半就是环境问题导致的了

        经过对这个报错的搜索，我发现很多方案都是对store/module/permission.js文件的懒加载代码进行修改，如下

若依部署后出现Error: Cannot find module ‘@/views/xxx‘问题，本地没有问题（解决办法）_若依error: cannot find module-CSDN博客

        首先这个方法十分的粗暴，就是将懒加载改为了非懒加载，我在修改之后，虽然动态路由的页面能够正常显示了，但是会出现样式文件失效的问题，从性能上来说没达到要求，从效果上来说也不对，因此这种方案排除掉

进一步探索：

        重新整理思路，首先，肯定是环境除了问题，并且问题是出现在文件的懒加载上，也许可以去若依的官方文档上找找，果然有懒加载的相关配置，见下面的链接
常见问题 | RuoYi
        原来懒加载是有相关配置的，需要在配置文件里面加入配置项才行

BABEL_ENV = production

NODE_ENV = production

        但是我在加入配置项后打包依然不对，于是我又改变搜索策略，直接搜索，若依框架懒加载失败，果然搜索到一篇相关的帖子
RuoYi-Vue前端打包动态路由加载报错问题_若依前端打包报错-CSDN博客

        这个帖子的情况完全符合我的错误，但是我按照上面修改之后，仍然不对，我怀疑还是环境问题，上面帖子提供的解决方法依然不够全面，于是我根据文章中的issue地址，直接到对应issue下寻找解决方案
Issues地址:动态路由按需加载-Cannot find module

逐步测试方案：

        这个issue的问题与我们的问题完全一致，并且评论区中有很多大佬甚至若依框架原作者的解决方案，因此我开始一个一个方案尝试

大致错误原因就是babel.config的配置文件导致的，细节可以参考下面的文章

详细记录前端项目使用import懒加载组件打包失败的踩坑之路_syntax-dynamic-import-CSDN博客

        其实可以很明显的发现，出错之后的打包，大小远远小于正常清空下的，这是因为动态加载文件的时候，没有成功加载动态路由的文件，大小直接比之前小了一大半，而动态加载需要用到babel插件来进行转译，所以babel出问题就会导致打包时，动态路由的文件无法正常加载

         根据评论区的解决方案(直接复刻仍然有问题)，我进行了一定的调整，终于解决了这个离奇大坑！！！

解决方法:

• 调整node版本为14.16.1(不一定是必须项，但是若依框架作者就是使用的这个版本)
• 修改babel.config配置文件

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/babel-preset-jsx',
   [ '@babel/preset-env',
    {
      'useBuiltIns': 'entry',
      'corejs': 3
    }]
  ],
  'env': {
    // 测试环境
    'staging': {
      'plugins': ['@babel/plugin-syntax-dynamic-import']
    },
    // 生产环境
    'production': {
      'plugins': ['@babel/plugin-syntax-dynamic-import']
    }
  }
}

• 下载bable所需的依赖

npm install babel-plugin-dynamic-import-node --save-dev

npm install --save-dev @babel/plugin-syntax-dynamic-import

npm install @babel/preset-env@7.22.5 --save  

• 配置vue.config.js文件

NODE_ENV = production
BABEL_ENV = production
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

• 清空node_modules文件，然后再打包！

 调整完成之后再打包，查看一下你的dist文件，如果大小比之前大了很多，恭喜你，解决了这个大坑，这说明已经正常加载了动态路由文件！！！

也可以去static/js里面去查看，可以发现多出来很多的js文件！