vue动态路由加载组件，找不到module问题

最新推荐文章于 2024-06-05 11:00:07 发布
最新推荐文章于 2024-06-05 11:00:07 发布
阅读量7k 收藏 6
点赞数 5
分类专栏： vue 文章标签： vue 前端 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36403693/article/details/100999289
版权

vue动态路由加载组件，找不到module问题


vue动态加载路由并挂载到vue。路由信息由后端给出，同时component的路径也是后端给出，但是动态加载该路径会报错。
原因：webpack 编译es6 动态引入 import() 时不能传入变量，因此webpack目前不能做到完全的动态加载路由
解决方案：在import时，拼接一个静态的字符串，这样webpack就可以正常加载了。 

 temp.component = () => import(`@/views/${menu.menuVueComponent}`) // 正确
 temp.component = () => import(`${menu.menuVueComponent}`) // 不能加载
 temp.component = () => import(menu.menuVueComponent) // 不能加载

前面直接拼@/会有一个scss样式报错，因为我在这里用的是vue-admin-template，可能是模板本身的问题，完全自己编写的后端不清楚会不会这样，如果@/不行，就多拼几层目录

文·若
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析vue路由异步组件和懒加载案例
08-27
懒加载是指仅在需要时才加载组件，而不是在应用程序启动时加载所有组件。这可以减少初始加载时间和改善用户体验。在上面的案例中，我们使用异步组件来实现懒加载。 在路由配置中，我们可以使用异步组件来加载对应的...
Vue.js中用webpack合并打包多个组件并实现按需加载
10-20
在Vue Router中，我们可以在路由配置中使用相同的策略来异步加载组件。例如： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ ...
关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)
热门推荐
提笔忘字的帝国
03-22 1万+
Error: Cannot find module '@/views/User';store sync?5d98:2 Uncaught (in promise) Error: Cannot find module '@/views/User'
找不到模块“vue-router”。你的意思是要将 moduleResolution 选项设置为 node,还是要将别名添加到 paths 选项中?
qq_63026743的博客
05-07 495
哈哈哈哈，不瞒你们，我就添加错了，哈哈哈。所以这也算写一个demo提醒自己。在tsconfig.app.json中添加，记得一定是。tsconfig.node.json 还是会报错的。
vue动态路由import异步加载组件，找不到module的问题
likuntao123的博客
09-10 9763
问题的由来：webpack分模块打包导致import路径src少一级目录（ps：路径是由后端提供的）。 解决办法： if (localJsonRouter.listenRouter) {//把后端的路径信息储存到sessionStorage listenRouter = localJsonRouter.listenRouter; listenRouter.forEach(item...
解决vue动态路由异步加载import组件,加载不到module的问题
小小1001的博客
08-27 3200
这篇文章主要是为了解决vue动态路由异步加载import组件,加载不到module的问题，这个问题困惑我了很久，终于找到了解决方法，希望对你们也遇到这样问题的人有所帮助。 报错信息 原因是webpack在编辑es6的时候动态引入import()时不能传入变量 解决办法： 网上推荐的解决方案是 但是依然不好使，这个问题困惑我了很久，就各种查资料尝试，最后终于找到了解决方案。 正确的解决方案是： 完美解决。 ...
vue ajax动态加载组件,解决vue动态路由异步加载import组件,加载不到module的问题
weixin_30767365的博客
08-06 1237
报错信息应该是这样的webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), :2:10)路由信息由后端给出，那么前端需要动态加载路由，同时component的路径也是后端给出，但是动态加载该路径会报错如：// 假如path = '@/views/user'const com = () => impo...
vue动态加载路由，动态加载菜单，找不到module
joan_FontEnd的博客
02-08 1949
做的功能是根据用户登录，来动态加载当前用户所拥有的菜单有哪些，所用模板是vue-admin-template，这块自己也不是很理解，暂时做个记录。 1.路由导入的时候有很多坑，网上看了很多资料说用require，结果都不行，最后用import方式实现的 2.data是后台返回的数据，data_是自己写死的模拟数据，后台返回data_这种结构 3.Object.assign(loadMenuData, data_)，对象赋值一定要用深拷贝Object.assign()，不然赋值不成功 ...
vue动态加载组件import引入组件找不到组件（Error: Cannot find module）
最新发布
宁波阿成的博客
06-05 944
vue动态加载组件import引入组件找不到组件（Error: Cannot find module）
vue动态import找不到module问题的解决方案
艺术就是爆炸!
04-21 1078
vue动态import找不到module问题的解决方案
vue动态组件找不到module问题,import不能接收动态参数
weixin_43080554的博客
05-08 3087
报错信息 代码是这样的;但是编译之后报上面错误. 原因是webpack打包的时候解析到import(path)的时候没有那么智能不会去解析path(官网是这样说的) 例如import(foo)，这样完全动态的加载方式将会失败，因为webpack需要一些文件位置信息。因为变量foo可能是系统或项目中任何文件的路径。import()必须至少包含关于模块所在位置的一些信息，因此让捆绑可以局限于特...
vue3加载动态路由出现的问题解决
A15029296293的博客
05-30 329
寻找了很多方法，最后明白了应该是npm run build 打包后，代码按照上面的import导入就无法找到组件路径，所以需要换一种引入方法。打印modules可以看到返回了views文件夹下的所有路径，通过遍历这个路径和后端拿到的数据路径，过滤出最后的动态路由。最近遇到了动态加载路由的问题，在开发环境下动态路由正常，打包后部署到服务器后，动态路由无法访问，一直报错。写一个for循环遍历方法，遍历后台返回的数据，并且遍历modules获取到对应的path并返回。
搭建Vue从Vue-cli到router路由护卫的实现
10-15
搭建Vue项目通常从安装Vue CLI开始，...总之，从Vue CLI创建项目到实现SVG图标加载，再到Vue Router路由卫兵的应用，这些都是构建现代Vue应用程序的基础步骤。通过不断学习和实践，你将能够构建出功能丰富的单页应用。
浅谈VUE单页应用首屏加载速度优化方案
10-18
通过 `require.ensure` 或 Webpack 的 `import()` 动态导入，只有当用户访问特定路由时才会加载对应的组件，例如： ```javascript const workCircle = r => require.ensure([], () => r(require('@/module/work-...
Vue+webpack实现懒加载过程解析
10-15
以上三种方式都可以在Vue路由中实现懒加载。需要注意的是，当使用`require.ensure`时，记得在`webpack.config.js`中配置`output.chunkFilename`，以便webpack知道如何命名生成的chunk文件。 总结： Vue+webpack实现...
Vue2.0使用过程常见的一些问题总结学习
08-30
5. **样式资源找不到**：`Module not found: Error: Can't resolve "style"`。在Webpack配置中，Vue2.0要求CSS加载器的完整写法，例如`style-loader!css-loader`，而Vue1.0中可以简写为`style!css`。 了解并解决...
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
12-09
以下是一个简单的实现方式，使用了 Element-UI 的加载组件： ```javascript import { Loading } from 'element-ui'; const spinRoute = { show() { let opt = { body: true, text: 'Loading...' }; if (!unique...
vue如何不用路由动态加载组件
05-27
Vue提供了异步组件和懒加载的方式来实现不用路由动态加载组件。可以使用`Vue.component()`方法注册一个异步组件，然后在需要使用的地方使用`<component>`标签来动态加载该组件。 具体步骤如下： 1. 使用`Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值