React+TypeScript+Vite配置路径别名和vscode智能路径提示

配置路径别名

在根目录下的 vite.config.ts 文件中配置如下代码，就可以使用路径别名了。

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' // vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, } })

此时可以正常启动项目，并正确使用路由了。

但是还是会报警告，所以我们还需要配置 vscode 的智能路径提示配置。

修改 Vscode 智能路径提示

在根目录下的 tsconfig.json 文件中配置如下代码。

{ "compilerOptions": { "jsx": "react-jsx", "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }

测试警告也消失了。