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

配置路径别名

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

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://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/*"]
    }
  }
}

测试警告也消失了。