Vite-React TS项目中Mac与Windows下的绝对导入兼容问题

首先明确：修改Windows系统的PATH变量无法解决这个问题，PATH是系统用来查找可执行程序的路径，和项目的模块解析规则完全无关。下面是针对这个问题的具体排查和修复步骤：

• 确认tsconfig.json的位置与路径配置匹配
  确保tsconfig.json放在项目根目录，baseUrl: "./app"表示以根目录下的app文件夹作为模块解析的基础目录，paths里的@/*: ["*"]对应app文件夹下的所有文件结构。如果你的tsconfig不在根目录，需要调整baseUrl为相对当前tsconfig的路径。

• 检查vite-tsconfig-paths插件的配置是否正确
  确保vite.config.ts里正确引入并启用了插件，示例配置如下：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import tsconfigPaths from 'vite-tsconfig-paths';
  
  export default defineConfig({
    plugins: [react(), tsconfigPaths()],
  });
  

  注意插件要放在plugins数组内，确保正确导入即可。

• 清除缓存并重启开发环境
  Windows下容易出现缓存残留问题，按以下步骤操作：

  1. 删除项目根目录下的node_modules文件夹和package-lock.json/yarn.lock
  2. 重新执行npm install或yarn install
  3. 删除vite的缓存目录（一般在node_modules/.cache/vite）
  4. 重启代码编辑器（比如VS Code，TS语言服务可能缓存了旧的配置）

• 验证VS Code的TypeScript版本设置
  如果使用VS Code，右下角会显示当前使用的TS版本，点击它选择「Use Workspace Version」，确保使用项目本地安装的TypeScript，全局版本可能不识别项目的路径配置。

• 检查是否存在配置冲突
  项目中如果有jsconfig.json或者tsconfig.node.json这类额外配置文件，可能会覆盖tsconfig.json的路径规则，确保这些文件里的baseUrl和paths配置和主tsconfig保持一致，或者直接删除不必要的配置文件。

• 测试路径解析是否正常
  可以写一个简单的测试：在app/components/Test.tsx里导出一个组件，然后在app/pages/Home.tsx里用import Test from '@/components/Test'导入，执行tsc --noEmit命令检查是否有编译错误。如果命令行没有报错但编辑器报错，大概率是编辑器缓存的问题，重启编辑器即可。

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