Nuxt3中app.vue导入TypeScript导出接口遇问题求助

针对你遇到的三个具体问题的修复方案 #

问题1：接口导出未找到报错 #

• 检查~/types/dtos/index.ts的导出语法，确保是显式导出：

  // ~/types/dtos/index.ts
  export interface UserDto {
    id: number;
    name: string;
    // 其他接口字段
  }
  

• 若导入类型，需明确使用import type语法：

  <script setup lang="ts">
  import type { UserDto } from '~/types/dtos'
  </script>
  

• 确认Nuxt自动识别~/types目录：Nuxt3默认扫描该目录下的类型文件，无需额外配置；若为自定义路径，需在nuxt.config.ts的types数组中添加对应路径。

问题2：类型导入报错（已加type="ts"） #

• 修正script标签写法：Vue3单文件组件中，标记TypeScript的正确方式是<script setup lang="ts">，而非仅type="ts"。
• 调整tsconfig.json的编译配置：

  {
    "compilerOptions": {
      "moduleResolution": "bundler",
      "preserveValueImports": true,
      "isolatedModules": true
    }
  }
  

• 若使用ESLint，修改eslint-plugin-vue规则，关闭或调整vue/no-restricted-imports中对类型导入的限制。

问题3：@dtos别名在app.vue无效 #

• 在nuxt.config.ts中同步配置Nuxt别名与TS路径：

  // nuxt.config.ts
  export default defineNuxtConfig({
    alias: {
      '@dtos': './types/dtos'
    },
    typescript: {
      tsConfig: {
        compilerOptions: {
          paths: {
            '@dtos': ['./types/dtos']
          }
        }
      }
    }
  })
  

• 重启Nuxt开发服务，别名配置修改后需重新编译生效。

你的疑问解答 #

1. app.vue需要特殊配置吗？ #

不需要特殊配置，但需满足三点：

• 别名在nuxt.config.ts中全局配置，且tsconfig的paths同步匹配；
• 类型文件的导出语法符合ES模块规范；
• script标签使用正确的lang="ts"标记。

2. 已设置type="ts"仍出现类型导入错误？ #

核心原因是Vue3单文件组件中**type="ts"不是标记TypeScript的正确语法**，正确写法是<script setup lang="ts">。此外，若依赖版本过旧（如vue、@nuxt/typescript-build），可能存在类型解析兼容性问题，建议升级到最新稳定版。

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