若依框架 动态路由按需加载-Cannot find module问题

出现这个问题,看到了

https://blog.csdn.net/weixin_47006311/article/details/128920556

和 https://gitee.com/y_project/RuoYi-Vue/issues/I4PZJF#note_17047621所在文档,按照每个回答都去试了,都不成功。

开始以为是代码及路由出了问题。

后来突然灵光一闪,对比了一下,

return (resolve) => require([@/views/${view}], resolve)
和 return () => import(@/views/${view})两种打包方案的代码包文件总大小。发现不一样大!就是在打包的时候,import动态引入的文件根本没打包进去。

然后就去搜了相应问题(import(`@/views/ 没有打包进去),有个博客给了答案!!
https://blog.csdn.net/yorcentroll/article/details/131061585
是@vue/cli-plugin-babel/preset 引起的,要把这个babel配置去掉,并替换成其他配置。
因此 我按照他修改
babel配置

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    // '@vue/cli-plugin-babel/preset'
    '@vue/babel-preset-jsx',
   [ '@babel/preset-env',
    {
      'useBuiltIns': 'entry',
      'corejs': 3
    }]
  ],
 
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    },
  }
}
export const loadView = (view) => { // 路由懒加载
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return  () => import(`@/views/${view}`)
  }
}

安装了
"@babel/preset-env": "^7.22.5",
"babel-plugin-dynamic-import-node": "^2.3.3",

再是 所有打包环境对应配置设置了

BABEL_ENV = production

NODE_ENV = production

这样之后,终于成功了,可以看到static/js下面瞬间出现了上百个js文件。。。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值