vite+ts配置项目路径别名

webpack中可以通过resolve.alias定义项目路径别名，这样可以在引入文件时，不再需要使用相对路径，统一以根路径（/src/）作为起点。vite也可以定义路径别名

vite.config.ts

resolve.alias 配置

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    // 配置路径别名。--->src下的代码
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@css': path.resolve(__dirname, './src/assets/css'),
    },
  },
});

tsconfig.json

TypeScript编写，还需要修改一下TypeScript的配置：

paths 和 baseUrl

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