Vitest无法识别tsconfig.json的include属性处理.vue文件及路径解析问题

一、包选择：用vite-tsconfig-paths而非vitest-tsconfig-paths #

• vitest-tsconfig-paths已被弃用，且存在包声明文件的导出配置问题（就是你碰到的类型报错），直接弃用即可。
• vite-tsconfig-paths是Vite官方生态插件，Vitest基于Vite构建，完全兼容该插件，能正确读取tsconfig中的paths配置，满足跨目录路径解析需求。

二、让TSConfig支持JSON扩展名 #

需同时配置TypeScript编译规则和Vitest的解析规则：

1. 配置TSConfig启用JSON模块 #

在src/tsconfig.json和ts/tsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": [
    // 保留原有include规则，追加JSON文件匹配
    "**/*.json"
  ]
}

2. 在Vitest中添加JSON扩展名解析 #

修改vitest.config.ts，在resolve字段中补充.json扩展名：

import { defineConfig } from "vitest/config";
import tsconfigPaths from "vite-tsconfig-paths";
import inject from "@rollup/plugin-inject";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
    plugins: [
        inject({
            $: "jquery",
            jQuery: "jquery",
        }),
        // 明确指定两个目录的tsconfig文件路径，避免插件自动识别出错
        tsconfigPaths({
            projects: [
                path.resolve(__dirname, "./ts/tsconfig.json"),
                path.resolve(__dirname, "./src/tsconfig.json")
            ]
        }),
        vue(),
    ],
    resolve: {
        // 包含JSON扩展名，让Vite能解析.json文件的导入
        extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
        // 可选：如果tsconfig-paths仍有问题，补充别名兜底，但优先用tsconfig-paths同步规则
        alias: {
            "datastores": path.resolve(__dirname, "./src/datastores/"),
            "pages": path.resolve(__dirname, "./src/pages/"),
        }
    },
    optimizeDeps: {
        include: ["node_modules/jquery/dist/jquery.js"],
    },
    test: {
        globals: true,
        include: ["ts/tests/**/*Tests.ts", "src/tests/**/*Tests.ts"],
        environment: "happy-dom",
        setupFiles: "ts/tests/test.setup.ts",
        silent: true,
    },
});

三、解决路径解析不一致问题 #

你提到WelcomeTests能解析pages/WelcomePage.vue，但WelcomePage.vue无法解析datastores/store，大概率是src/tsconfig.json的paths配置缺失：
检查src/tsconfig.json是否包含以下paths规则：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "datastores/*": ["./datastores/*"],
      "pages/*": ["./pages/*"]
    }
  }
}

同时确保tsconfig.base.json作为基础配置，没有覆盖或冲突这些paths设置。

额外提示 #

• 尽量避免同时手动配置resolve.alias和tsconfig-paths，防止路径规则冲突，优先用tsconfig-paths同步TypeScript和Vite的路径解析逻辑。
• 确保安装的vite-tsconfig-paths是最新版本：npm install vite-tsconfig-paths --save-dev

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