vite+react+ts项目使用别名

在Vite+React+TS项目中使用别名，你可以在vite.config.ts文件中配置别名。以下是一个配置示例：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      // 添加更多别名
    },
  },
});

在tsconfig.json中也要配置相同的别名，以便TypeScript能够理解这些别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"]
      // 添加更多别名
    }
    // ...其他配置
  }
  // ...其他json配置
}

配置完成后，你可以在项目中使用别名来导入模块：

// 在React组件中使用别名
import MyComponent from '@components/MyComponent';
import './styles/global.css';
 
function App() {
  return (
    <div className="app">
      <MyComponent />
    </div>
  );
}
 
export default App;

别名使得你可以直接使用自定义的导入路径，而不用每次都写出完整的相对路径或绝对路径，这样可以提高代码的可读性和易写性。