路径别名会导致一个 .vue 文件中出现“无法找到模块”ts(2307) 错误，但不会导致另一 .vue 文件出现错误？

Question

~/utils/assets我在尝试在 Vue 3 SFC（单文件组件）文件中使用路径别名 ( ) 时遇到一个奇怪的问题。我正在使用Volar VS Code 插件，即使在使用Volar 插件启用“接管模式”后也会出现此问题。

\n

\n
1. 正如您在下面的屏幕截图中看到的，该Home.vue文件可以import { zipFromImages } from "~/utils/assets";毫无问题地引用。然而，Preview.vue与 \xe2\x80\x94 位于同一目录中的文件Home.vue\xe2\x80\x94 不是，并抛出 ts(2307) 错误：Cannot find module \'~/utils/assets\' or its corresponding type declarations.ts(2307)。
\n
2. 当我选择Preview.vue文件（Vue SFC.vue文件）时，VS Code 底部显示“No tsconfig”。当我选择Home.vue文件时，它会正确显示“tsconfig.json”并按tsconfig.json预期链接到我的文件。
\n

\n

\n

还有其他人遇到过这些问题并找到解决方案吗？

\n

我尝试过的

\n

\n
• [x] 遵循官方 Vue + TypeScript 说明
\n
• [x] 使用最新的 VS Code 和插件版本
\n
• [x] 使用最新的 NPM 包
\n

\n

配置

\n

tsconfig.json

\n

{\n    "compilerOptions": {\n        "target": "es6",\n        "lib": [\n            "es6",\n            "dom"\n        ],\n        "outDir": "./dist",\n        "module": "esnext",\n        "isolatedModules": true,\n        "strict": true,\n        "skipLibCheck": true,\n        "esModuleInterop": true,\n        "moduleResolution": "node",\n        "noUnusedLocals": true,\n        "noImplicitAny": true,\n        "allowJs": true,\n        "resolveJsonModule": true,\n        "baseUrl": "./",\n        "paths": {\n            "@/*": [\n                "./src/ui/*"\n            ],\n            "~/*": [\n                "./src/ui/*"\n            ]\n        },\n        "typeRoots": [\n            "./node_modules/@types",\n            "./node_modules/@figma"\n        ]\n    },\n    "include": [\n        "src/**/*.ts",\n        "src/**/*.d.ts",\n        "src/**/*.tsx",\n        "src/**/*.vue"\n    ],\n    "exclude": [\n        "node_modules",\n        "dist"\n    ]\n}\n

\n

vite.config.ts

\n

import { defineConfig } from "vite";\nimport vue from "@vitejs/plugin-vue";\nimport { viteSingleFile } from "vite-plugin-singlefile";\nimport path from "path";\n\nexport default defineConfig(({ mode }) => {\n  const isDev = mode === "development";\n  return {\n    plugins: [vue(), viteSingleFile()],\n    resolve: {\n      alias: {\n        "@": path.resolve(__dirname, "src/ui"),\n        "~": path.resolve(__dirname, "src/ui"),\n      },\n    },\n    build: {\n      outDir: path.resolve(__dirname, "dist/ui"), // The output directory\n      minify: !isDev,\n      sourcemap: true,\n      watch: isDev\n        ? {\n            exclude: ["dist", "node_modules"],\n          }\n        : null,\n      target: "esnext",\n      assetsInlineLimit: 100000000,\n      chunkSizeWarningLimit: 100000000,\n      cssCodeSplit: false,\n      brotliSize: false,\n      rollupOptions: {\n        output: {\n          manualChunks: () => "everything.js",\n        },\n        inlineDynamicImports: true,\n      },\n    },\n  };\n});\n

\n

版本信息

\n

VS Code 和 VS Code 插件

\n

\n
• VS代码1.65.2
\n
• Vue 语言特性 (Volar) v0.33.2
\n
• TypeScript Vue 插件 (Volar) v0.33.2
\n

\n

NPM 包

\n

\n
• 维特2.8.6
\n
• 版本3.2.6
\n
• 打字稿 4.6.2
\n
• @vue/编译器-sfc 3.2.6
\n
• @vitejs/插件-vue 2.2.4
\n
• vite-插件-singlefile 0.7.1
\n

\n