动态路由按需加载-Cannot find module

/ 详情

已完成

创建于

2022-01-09 13:36

实现步骤
1.gitee 仓库clone 代码
2. 使用yarn install
3. npm run build:stage
4. 配置ng代理请求 demo 接口 http://vue.ruoyi.vip/prod-api/
5. 部署完成
组件未找到

@若依大佬麻烦解决一下这个bug, 折磨了我好多天了。
尝试好几个方法都不行 https://github.com/PanJiaChen/vue-element-admin/
permission.js
export const loadView = (view) => { if (process.env.NODE_ENV === 'development') { return (resolve) => require([@/views/${view}], resolve) } else { // 使用 import 实现生产环境的路由懒加载 return () => import(@/views/${view}) } }
package.json
"babel-plugin-dynamic-import-node": "2.3.3",
希望得到您的回复。

创建了任务

node 版本 12.20.0

项目比较大，需要组件按需加载。我看您的 demo 是能实现按需加载了的。所以请问您是怎么实现的 http://vue.ruoyi.vip/index

有大佬解决过这个问题吗，着急。

更新到官网最新版我记得这个修复过

官网直接clone
大佬，您本地能行吗？我是直接clone 下来，npm run build:stage
配置ng 代理到 http://vue.ruoyi.vip/prod-api 发现问题还存在。能把您官网 vue 前后端分离的版本的package.json 贴出来看看嘛

多半是你环境问题我这是没问题 node14.X npm 6.X

node,npm 版本
大佬，您好方便留个qq, 远程协助下吗？我已经更新了node 版本，npm 版本。v14.10.0， 6.14.8。还是会有问题

那我也就不清楚了等 @若依大佬解决吧

npm run dev 没问题，打包就不行，你是那种方式运行的呀

npm run build:prod,npm run dev 都可以

解决了嘛？我也一样的问题

同问，和你遇到一样的问题

动态组件需求很常见，希望 @若依大佬能帮忙解决一下。

npm run dev 没问题，打包发布，就不行

这个依赖加好了记得执行一下命令，如果不行可以加我QQ帮你们看一下，之前帮别人看过加了就正常了。
npm install --registry=https://registry.npm.taobao.org
修复版本差异导致的懒加载报错问题
https://gitee.com/y_project/RuoYi-Vue/commit/6e14601c7cd8312a8dcb372b341ea05c7b965a23

@zbk @dearMyFriend007 @LaTiao @守望麦田 @疯狂的狮子Li

大佬，我添加您qq了，请求协助。

我这边也有同样的问题，我加您qq，请求协助

大佬我这边一直不行啊今天新拉的项目还是实现不了懒加载看官网是有懒加载效果得但是拉的代码就是不行

@若依大佬，各种办法都试了，还是有问题，能帮忙解决下么

请求qq协助

@dearMyFriend007 @大诚g 没有看到消息，发个消息过来。（先按照我上面的方法install一下）
也可以执行如下命令
npm install babel-plugin-dynamic-import-node --save-dev

如果还是不行，你也可以用我使用的node版本去试试。我不加dynamic-import-node插件也是没有问题的~
https://pan.baidu.com/s/1E9J52g6uW_VFWY34fHL6zA 提取码: vneh
微服务工具包/基础工具包/node-v14.16.1-x64.msi

PS：如果是从低版本升级上来的删除一下node_modules然后在重新安装一下在打包试试。

如果以上步骤还不行，可以试试npm install --save-dev @babel/plugin-syntax-dynamic-import，对于一些高版本的node会出现的这种情况，加下这个插件就好了。

你好，麻烦咨询个问题，我使用的是vue3版本，模块页面默认的文件名称不是index.vue，导致动态加载路由的时候无法正常加载组件路径：component: () => modules[path] ()，具体如下图所示：

输入图片说明

问题作者已协助解决删除ruoyi-ui下的node_modules，重新install一下依赖，再次尝试，已ok！
感谢作者 @若依

我也是同样的问题后端jar包放linux服务器上前端放本地npm run dev 运行没问题，但是npm run build:prod打包到云服务器上登录之后只能访问到首页访问其他需要通过动态路由加载的页面就加载不出来。能说一下您的具体解决步骤吗？谢谢啦

我的问题和你的一样，请问你是怎么解决的啊？

如何解决的？

你解决了吗

我也是同样的问题后端jar包放linux服务器上前端放本地npm run dev 运行没问题，但是npm run build:prod打包到云服务器上登录之后只能访问到首页访问其他需要通过动态路由加载的页面就加载不出来。

@dearMyFriend007 @大诚g 帮着两位小伙伴看了都是没有问题的，有些低版本升级的可以删除一下node_modules然后在试试。如果按照上述方法试过都不行可以加我QQ会帮忙远程看一下是否还有其他原因导致。先关闭了。

已经解决谢谢指导

请问什么问题，解决了吗

你好，请问是怎么解决的？我这边是安装了新的依赖包之后，打包的时候就再也生成不了懒加载的组件模块js了，应该和你的问题一样。

将任务状态从 待办的 修改为已完成

也遇到了这个问题
通过删除ruoyi-ui下的node_modules，重新install一下依赖，然后再 npm run build:prod, 再部署到 nginx 上, 就没有问题了

我觉得 @若依大佬应该是if else分支反了，应该是dev环境用import，prod环境用require。
因为dev环境才有dynamic-import-node插件把import转为require，目的是提高热更新速度。
正确写法如下：

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return () => import(`@/views/${view}`)
  } else {
    return (resolve) => require([`@/views/${view}`], resolve)
  }
}

node高版本的直接全用import，不要dynamic-import-node插件

额。。。用import 才能动态加载组件呀，不然全用 require 引用是没有问题的。
路由懒加载非常玄学，就是我把一摸一样的代码放到别的机器上一样不行。目前不知道是什么原因导致的额。

这里require是异步组件懒加载兄弟，返回的不是组件是promise

确实调过来问题就解决了

不用懒加载，就是以前的版本的写法

export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
}

你这个真正实现懒加载了吗？你看下若以官网点击某个页面才会加载对应页面得js 再看下你自己得系统是不第一次加载了很大得js

兄弟你的懒加载实现了吗

你这个真正实现懒加载了吗？你看下若以官网点击某个页面才会加载对应页面得js 再看下你自己得系统是不第一次加载了很大得js

这个可行，if..else逻辑颠倒下

老哥你的实现了吗

没有还是全部加载的

最近又出现问题，最终修改 babel.config.js 文件解决

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'production': {
      // 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']
    }
  }
}

我也是一直有这个问题，这样改完了就好了

这个可以解决问题，但是有多个环境的话，每次发版，还得修改提交 babel.config.js 这个文件

这个有用。如果是多个环境的话，可以在 babel.config.js 内配置多个节点，来加载动态路由的模块。

多个环境怎么配置呢？

多环境的的env 里面的 NODE_ENV 也是 production 呢。注意这一点。处理本地开发环境的 NODE_ENV = 'development' 其他的都是 production
输入图片说明

参考文档的最后提示
http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#如何实现路由的懒加载
输入图片说明

测试正解

这样配置打包出来的好像没有很多模块js，不像是懒加载的

这么多天过去了，这个问题还是有很多人遇到了。
我最后是什么插件都不装就可以了

babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'production': {
      // 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']
    }
  },
  'plugins': [
    [
      'component',
      {
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

我是把项目里面的模块都删了，项目体积变小了，就可以打包，删一半打包出来300多M，全加上就一直在Building for production...

有用

module.exports = {
presets: [
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
'@vue/cli-plugin-babel/preset'
],
'env': {
'production': {
// 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']
}
}
}
用这个没问题，production改成对应的打包环境

怎么解决这个问题啊,谁能帮助一下,qq:865462891

你解决了吗？

你解决了吗？哥

你解决了吗

https://blog.csdn.net/weixin_47006311/article/details/128920556 这个帖子能行

亲测这个帖子有用 https://blog.csdn.net/weixin_47006311/article/details/128920556

试了，npm run build:prod卡死，内存溢出，无法打包。。。

解决了，不是这边找到的解决方案。希望能对其他同学有用。
对比了 return (resolve) => require([@/views/${view}], resolve)
和 return () => import(@/views/${view})
两种场景下打包的代码文件，发现后者要小很多，实际上，后者只打包了本地router对应的文件，没有打包permission里动态引用的文件。
然后就去搜了对应问题，有个博客给了思路
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']
    },
  }
}

permission里

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文件。。。

这个方法有效。

有用，非常感谢

感谢大佬

感谢大佬！搞了几天才找到这里来

路由懒加载时，第一次打的是stage包，部署后就会出现点击菜单不加载的现象，后续再打stage、prod都会有问题，除非清除依赖重新install，再打包。如果出现这个问题，可以在babel.config.js里的env下新增

    // 测试环境
    'staging': {
      'plugins': ['@babel/plugin-syntax-dynamic-import']
    },
    // 生产环境
    'production': {
      'plugins': ['@babel/plugin-syntax-dynamic-import']
    }

如果打stage包，还需要在.env.staging下新增BABEL_ENV = production，参考若依文档：
如何实现路由的懒加载

原因确实是babel配置的问题，
babel-plugin-dynamic-import-node 使用这个是为了在生产环境提高热更新速度，但由于动态路由已根据环境设置了（如下），所以这个就不需要了可以直接删掉

if (process.env.NODE_ENV === 'development') { // 使用 require 实现开发环境的路由懒加载
  return resolve => require([`@/views/${view}`], resolve)
} else { // 使用 import 实现生产环境的路由懒加载
  return () => import(`@/views/${view}`)
}

@babel/plugin-syntax-dynamic-import 这个插件可能由于我的cli版本比较新所以也不需要，修改后的 bable.config.js 文件如下

// '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.
//     // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
//     'plugins': ['dynamic-import-node']
//   }
// }

可以解决问题

插眼

问题已解决，安装 @babel/plugin-syntax-dynamic-import ，babel.config.js配置如下

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  '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']
    },
    'production': {
      'plugins': ['@babel/plugin-syntax-dynamic-import']
    }
  }
}

配置说明: 配置中development环境使用原有的 babel-plugin-dynamic-import-node 包，production或其他自定义环境变量需要指定 @babel/plugin-syntax-dynamic-import 包，并将且需要将.env.[环境名]文件中增加 BABEL_ENV = 环境名，此处的环境名对应babel.config.js中环境名

补充环境文件
输入图片说明

# 页面标题
VUE_APP_TITLE = 若依管理系统

# 测试生产环境配置
NODE_ENV = production

# babel环境变量，用于babel.config.js
BABEL_ENV = production

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

如果遇到这个问题你先看下你们对应环境是否配置了VUE_CLI_BABEL_TRANSPILE_MODULES，如果使用import()使用动态路径导入就去掉这个，要不然这个配置会导致@vue/babel-preset-app把@babel/preset-env的参数modules改成commonjs，这才会导致不能用import(动态路径含变量)这种形式，终极解决