vite+ts项目配置路径别名

在Vite项目中配置路径别名，你需要在项目根目录下的vite.config.ts文件中使用resolve.alias配置选项。以下是一个配置路径别名的例子：

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      // 添加一个别名 "@components" 指向 "src/components" 目录
      '@components': path.resolve(__dirname, 'src/components'),
      // 你可以根据需要添加更多别名
    },
  },
});

在TypeScript中，别名默认不会被自动识别。你需要在tsconfig.json中配置paths选项：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 这需要和vite.config.ts中的基础路径一致
    "paths": {
      "@components/*": ["src/components/*"]
      // 这里配置的路径需要和vite.config.ts中的alias对应
    }
  }
}

配置完成后，你可以在TypeScript文件中使用配置的别名来导入模块：

// 假设你有一个组件在 src/components/MyComponent.tsx
import MyComponent from '@components/MyComponent.tsx';

确保重启Vite服务器以使配置生效。