Vite项目中不带@的路径别名配置问题

嘿，我懂你现在的处境！从CRA转到Vite后，原来那种不带@的路径别名突然不好使了是吧？别慌，咱们一步步来把这个问题解决掉～

首先，咱们先调整tsconfig.json里的配置。你原来的配置里paths只设置了带@的匹配规则，但你实际用的是不带@的直接导入，所以得把不带@的匹配也加上：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@*": ["src/*"],
      "*": ["src/*"]
    }
    // 其他配置...
  }
}

这里的"*": ["src/*"]就是关键，它会把所有不带前缀的导入路径都映射到src目录下去查找对应的文件。

接下来，确保你的vite.config.ts里正确启用了vite-tsconfig-paths插件，配置大概是这样的：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

这个插件的作用就是自动读取tsconfig.json里的路径别名配置，让Vite能识别这些规则。

最后别忘了重启一下Vite的开发服务器哦！有时候配置修改后不重启的话，新的规则可能不会生效。

做完这些，你再试试原来的导入语句import Loader from 'components/shared/Loader/Loader';，应该就能正常找到src/components/shared/Loader/Loader.tsx这个文件啦～

备注：内容来源于stack exchange，提问作者magrega