Vue 3 中的自定义类型“未找到导入”（使用 Vite/Vitesse）

Question

我有一个运行Vitesse（Vite启动器）的 Vue 3 项目。我已向ProductData我的 中添加了一种自定义类型src/types.ts，但是当我尝试在其中一个页面中使用它时，该页面无法加载，并且出现一些控制台错误，全部显示SyntaxError: import not found: ProductData. 导入的路径绝对正确，类型已导出，并且我也尝试从不同位置的 ts 文件导入，但看到了相同的东西。

store有趣的是，我从我的文件（仅从 *.vue 文件）导入这些类型没有任何问题。有任何想法吗？这篇文章shims.d.ts提到在和中添加一些东西tsconfig.json，但它们没有产生任何影响。

编辑：忘记包括我的tsconfig.json. 这是include@flydev 的：

// Some items added from /sf/ask/4460716641/
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "ESNext",
    "target": "ESNext",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "useDefineForClassFields": true,
    "strict": true,
    "esModuleInterop": true,
    "incremental": false,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "importHelpers": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": [
      "vite/client",
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client"
    ],
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.vue"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

编辑2：刚刚转移到chrome而不是firefox，当我签出时types.ts，sources文件是空的。该错误实际上也不同，并且可能更有帮助：SyntaxError: The requested module '/src/types.ts' does not provide an export named 'JsonResponse'。

Answer 1

我在 vitejs/vite 的一个问题中看到了这个评论：

Vue 中存在类型导入的已知问题，如果您使用导入类型形式，它应该可以工作： import type { User } from '~/types'

更改我的导入来源

import { ProductData } from '~/types'

到

import type { ProductData } from '~/types'

似乎解决了问题。修复导入后，我发现第三方类型也发生了同样的情况，并且更新导入也修复了该问题。