javascript - Vue3 中使用 import() 和模板字符串时为何找不到模块？

Question

我在做动态路由时，从网上查找资料，发现都是用的()=>import()。但是我在这么写时发现在使用模版字符串时import找不到模块

//@/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

我看着很多人都在用这种方式，所以应该是我的问题，但我不太清楚到底是哪里的问题。

Answer 1

vue cli使用webpack打包，使用import()进行动态加载的时候，参数需要有一定的标识度，让webpack知道去哪预加载，你现在的写法webpack不知道，可以多写一点，比如import(@/views/${menu.component}.vue)

异步import时好时坏怎么办？
在vue中import()语法为什么不能传入变量?

Answer 2

### 回答

在 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);
```

3. 使用 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，建议尝试上述第二种解决方案（映射路径），因为它既简单又灵活，而且不需要改变现有的构建系统。