vue3 + vite 动态加载？

Question

初始：

const lazyLoad = (url: string) => import(`./${url}.vue`);

可以使用，但 vite 有警告：

09:45:57 [vite] warning: invalid import "./${url}.vue". Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example: import(`./foo/${bar}.js`).  Plugin: vite:dynamic-import-vars  File: D:/NHANH/WJT/project/intelligence-chart/src/components/configItem/config/main.ts09:45:57 [vite] warning: D:/NHANH/WJT/project/intelligence-chart/src/components/configItem/config/main.ts1  |  import { Eye } from "@vicons/ionicons5";2  |  const lazyLoad = (url) => import(`./${url}.vue`);   |                                   ^^^^^^^^^^^^^^3  |  const Config = {4  |    echarts: {The above dynamic import cannot be analyzed by Vite.See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

移动文件并改为：

const lazyLoad = (url: string) => import(`./config/${url}.vue`);

vite 没有警告了，但浏览器控制台报错：

Uncaught (in promise) Error: Unknown variable dynamic import: ./config/echarts/line/data.vue

或是 不移动 文件改为：

const lazyLoad = (url: string) => import(`../config/${url}.vue`);

都不行，这是为什么？
如何处理？

Answer 1

首先，让我们解决为什么会出现这些错误和警告。

Vite 的警告：
Vite 在处理动态导入时有一些限制。特别是，它不支持从变量中直接导入文件。这是为了防止可能的循环依赖和确保构建过程的可预测性。因此，当你尝试使用 import(./${url}.vue) 这样的导入语句时，Vite 会发出警告。

解决方法是，如你所做的，将动态导入的模块放在一个单独的目录中，并使用更具体的路径进行导入，如 import(./config/${url}.vue)。

但是，你提到了浏览器控制台报错的问题。这个错误表明，尽管路径看起来是正确的，但 Vite 或浏览器无法找到指定的文件。

可能的原因和解决方法：

1. 文件路径问题：确保 ./config/${url}.vue 指向的文件确实存在于项目的文件系统中。
2. 大小写敏感性：某些操作系统（如 Linux）对文件路径是大小写敏感的。确保你的导入路径与实际文件的大小写完全匹配。
3. Vite 配置：检查你的 Vite 配置，确保没有设置可能干扰动态导入的选项。
4. 使用 /* @vite-ignore */：尽管这不会解决问题，但如果你确定动态导入是预期的，并且想要忽略 Vite 的警告，可以在 import() 调用中使用 /* @vite-ignore */ 注释。但这并不是解决问题的根本方法。

const lazyLoad = (url: string) => import(/* @vite-ignore */ `./config/${url}.vue`);

5. 检查其他插件或工具：确保没有其他的构建插件或工具（如 TypeScript 编译器）在处理这些动态导入时产生问题。
6. 清除缓存和重新启动：有时候，Vite 或其他构建工具可能会缓存先前的构建结果。尝试清除缓存（例如，删除 .vite 目录）并重新启动开发服务器。

如果以上方法都不能解决问题，建议进一步查看你的项目配置和代码，以确定问题的确切原因。同时，确保查阅 Vite 和相关工具的最新文档和社区，看看是否有其他人遇到了类似的问题。