Nuxt3动态导入报TypeError模块解析失败，但直接传路径正常

现象 #

• 静态字符串路径的import可正常运行：

<script setup lang="ts">
const data = await import('~~/myPath/myFile')
console.log(data)
</script>

• 用变量存储路径再执行import会触发错误：TypeError: Failed to resolve module specifier '~~/myPath/myFile'，对应代码：

<script setup lang="ts">
const path = '~~/myPath/myFile'
const data = await import(path)
console.log(data)
</script>

（运行环境：Nuxt 3.0.0，Nitro 1.0.0）

原因 #

Nuxt 3的模块别名（比如~~/）依赖编译阶段的静态分析来解析为真实文件路径。当用变量存储路径做动态导入时，编译器在编译期无法识别变量内的别名，运行时Nitro也无法处理这个未解析的别名，最终导致路径解析失败。

解决方法 #

方法1：使用import.meta.glob预定义可导入文件 #

如果需要动态加载指定目录下的文件，推荐用Nuxt支持的import.meta.glob，它会在编译阶段解析别名，同时支持动态加载：

<script setup lang="ts">
// 预匹配myPath目录下的所有文件（可按需调整匹配规则）
const modules = import.meta.glob('~~/myPath/*')
// 加载目标文件，路径需和匹配规则对应
const data = await modules['/myPath/myFile']()
console.log(data)
</script>

方法2：替换别名为相对路径 #

如果只是单个文件的动态导入，直接把~~/别名换成相对当前组件的路径即可：

<script setup lang="ts">
// 示例：当前组件在components目录，myFile在项目根目录的myPath下，相对路径为../myPath/myFile
const path = '../myPath/myFile'
const data = await import(path)
console.log(data)
</script>

内容的提问来源于stack exchange，提问作者aknott