关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)

在Vue项目中,为不同角色实现动态路由时遇到组件加载问题。初始尝试使用import动态导入导致错误,但通过修改为使用require及resolve方式成功解决。问题在于动态加载组件的实现方式,eval方法也可作为备选方案。
摘要由CSDN通过智能技术生成

项目场景:

在项目开发中会有这么一个需求:不同的角色对应的权限不一样也就意味着所展现的菜单也会不一致,因此我们需要实现一个动态路由,在这过程中遇到了一个棘手的问题,也就是标题所说的,特写本文作为记录

问题描述:

动态路由的添加需要基本的path、name以及component,如下:

path和name的添加没有问题,出现问题的是component这部分,当我使用这个写法的时候,调式控制台就报出了以下错误:

后面经过一番折腾改成了以下这种写法:

离谱啊!本来没抱任何希望的我,它居然成功了!!! 

附上代码: 

// component: () => import(`@/views/${itemm.name}`),
component: (resolve) => require([`@/views/${itemm.name}`], resolve),

但是问题又来了!这是为什么???有没有大佬给解释解释啊!!! 

附加


如果上述方法不行可以尝试来自评论区飙哥的回复:

component: eval(`()=>import("@/view/${item.component}")`), 试试这样

Parsing error: Cannot find module 'vue/cli-plugin-babel/preset' 是因为你的项目缺少了 @vue/cli-plugin-babel 这个模块。为了解决这个问题,你可以尝试以下几个步骤: 1. 首先,删除项目中的 node_modules 文件夹,然后打开终端并输入命令 `cnpm install`,这将重新安装项目的所有依赖。 2. 如果第一步没有解决问题,你可以尝试安装 babel-plugin-component 插件。在终端输入命令 `npm install babel-plugin-component -D` 或者 `yarn add babel-plugin-component` 安装该插件。 3. 在项目的根目录中到 .babelrc 文件(如果没有则创建一个),将下面的代码添加到 .babelrc 文件中: ``` { "presets": [["@babel/preset-env", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 4. 如果出现报错信息 "Parsing error: Cannot find module 'babel-preset-es2015'",可以尝试将 .babelrc 文件里的 "es2015" 改为 "@babel/preset-env",如下所示: ``` { "presets": [["@babel/preset-env", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 5. 如果你希望将配置项写入到 babel.config.js 文件中,可以将以上代码合并到 babel.config.js 文件中,如下所示: ```javascript module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ["@babel/preset-env", { "modules": false }] ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 希望以上步骤能够帮助你解决问题。如果你还有其他相关问题,请继续提问。 相关问题: 1. 如何安装和配置 vue-cli? 2. 什么是 babel-plugin-component 插件?如何使用它? 3. babel.config.js 和 .babelrc 有什么区别?
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦境游子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值