我在做动态路由时，从网上查找资料，发现都是用的()=>import()。但是我在这么写时发现在使用模版字符串时import找不到模块
极客观点
项目管理
HarmonyOS
//@/views/userManager/UserManageIndexVIew.vue
let a = import('@/views/userManager/UserManageIndexVIew.vue');
console.log(a);//没问题
let b = import(`@${menu.component}.vue`)
console.log("b: " + `@${menu.component}.vue`)
console.log(b)//找不到结果是
我没有使用vite构建项目，只是用的vue cli
我看着很多人都在用这种方式，所以应该是我的问题，但我不太清楚到底是哪里的问题。
AI BotBETA
### 回答
在 Vue3 中使用 `import()` 函数进行动态导入时，模板字符串（template literals）的使用确实有一些限制。你遇到的问题主要是因为 Webpack（Vue CLI 使用的打包工具）在解析动态 `import()` 路径时，无法正确解析模板字符串中的变量部分。
具体来说，Webpack 需要在编译阶段静态地解析出所有被动态导入的模块路径。当你使用普通的字符串（如 `'@/views/userManager/UserManageIndexView.vue'`）时，Webpack 可以轻松解析这个路径，因为这是一个静态字符串。
然而，当你使用模板字符串（如 `` `@${menu.component}.vue` ``）时，Webpack 无法在编译阶段知道 `menu.component` 的值，因此无法正确地解析和打包这些模块。
#### 解决方案
1. **使用静态路径**：如果可能，尽量使用静态路径来动态导入模块。这通常意味着你需要预先知道所有可能的模块路径，并在代码中硬编码它们。
2. **映射路径**：如果你确实需要根据某些变量来动态导入模块，可以考虑在代码中创建一个映射，将变量映射到静态路径。例如：
const componentMap = {
'UserManager': '@/views/userManager/UserManageIndexView.vue',
// 添加更多映射
};
let componentName = menu.component.replace(/^\//, ''); // 确保变量中不包含前导斜杠
let modulePath = componentMap[componentName] || '@/views/NotFound.vue'; // 提供一个默认路径以防映射失败
let module = import(modulePath);
```
使用 Webpack 的 require.context()：这是一个更高级的技巧，它允许你创建一个可以在运行时解析路径的上下文。然而，这通常用于在特定目录下动态加载多个模块的情况，并且仍然需要一些静态信息来指定目录。
const viewsContext = require.context('@/views', true, /\.vue$/);
let componentName = menu.component.replace(/^\//, '').replace(/\.vue$/, ''); // 清理路径
let module = viewsContext(`./${componentName}.vue`);注意：`require.context()` 仅在 Webpack 中有效，并且不支持 ES Modules 的 `import()` 语法。如果你正在使用 Webpack 并且可以接受这种语法，这可能是一个可行的解决方案。
在你的情况下，考虑到你使用的是 Vue CLI，建议尝试上述第二种解决方案（映射路径），因为它既简单又灵活，而且不需要改变现有的构建系统。
8 回答5.8k 阅读✓ 已解决
9 回答9.2k 阅读
6 回答4.7k 阅读✓ 已解决
5 回答3.5k 阅读✓ 已解决
4 回答7.9k 阅读✓ 已解决
7 回答9.8k 阅读
3 回答6.3k 阅读✓ 已解决
vue cli使用webpack打包，使用import()进行动态加载的时候，参数需要有一定的标识度，让webpack知道去哪预加载，你现在的写法webpack不知道，可以多写一点，比如import(
@/views/${menu.component}.vue)异步import时好时坏怎么办？
在vue中import()语法为什么不能传入变量?