Nuxt 3（Nitro）中如何正确使用动态导入？

在src/server/api/urls.ts中，直接用静态字符串导入TS模块能正常运行：

export default defineEventHandler(async event => {
    const module = await import('../../../utils/transliterate')

    return []
})

但把路径存到变量里就会触发错误：

export default defineEventHandler(async event => {
    const path = '../../../utils/transliterate'

    const module = await import(path)

    return []
})

Unknown file extension ".ts" for /mnt/projects/projects/.../src/utils/transliterate.ts

问题原因 #

静态字符串导入会被Nuxt/Nitro的构建工具提前解析，自动把TS文件编译成JS后再处理导入。但使用变量时，构建工具无法静态分析路径，运行时Node.js会直接读取原始TS文件，而Node.js默认不支持解析.ts扩展名，所以报错。

解决方案 #

1. 优先使用静态导入路径
   如果路径是固定的，直接写静态字符串是最稳妥的方式，避免动态变量带来的问题。

2. 使用import.meta.resolve（适用于Vite/Nuxt环境）
   如果你必须用动态变量，可以通过import.meta.resolve获取编译后的正确路径：

   export default defineEventHandler(async event => {
       const path = '../../../utils/transliterate'
       const resolvedPath = await import.meta.resolve(path)
       const module = await import(resolvedPath)
   
       return []
   })
   

3. 添加Vite忽略注释
   在动态导入时添加/* @vite-ignore */注释，让构建工具跳过静态分析，同时确保你的TS文件被正确编译进产物：

   export default defineEventHandler(async event => {
       const path = '../../../utils/transliterate'
       const module = await import(/* @vite-ignore */ path)
   
       return []
   })
   

4. 直接指向编译后的JS文件
   如果是自定义构建流程，可以直接使用编译后的JS文件路径（比如../../../utils/transliterate.js），但这种方式需要手动同步文件结构，灵活性较差。

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