react vite.config.ts配置
时间: 2025-01-11 21:50:49 浏览: 68
### 如何在 React 项目中设置和配置 `vite.config.ts` 文件
#### 配置文件概述
`vite.config.ts` 是 Vite 项目的配置文件,用于定制化构建过程中的各种选项以及集成不同的插件[^1]。
#### 使用 defineConfig 创建配置对象
为了更好地组织配置并获得 TypeScript 类型支持,在编写 `vite.config.ts` 时推荐使用 `defineConfig` 函数来创建配置对象。这有助于定义开发环境和生产环境下的不同配置选项[^3]:
```typescript
import { defineConfig } from 'vite';
export default defineConfig({
// 配置项...
});
```
#### 基础配置示例
下面展示了一个简单的 `vite.config.ts` 配置实例,包含了服务器端口设定、代理规则以及其他一些常见的配置参数:
```typescript
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [
reactRefresh(),
],
server: {
port: 3000,
proxy: {
'/api': {
target: env.VITE_API_URL || 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
resolve: {
alias: {
'@': '/src'
}
}
};
});
```
#### 处理路径别名问题
当遇到类似于无法解析 `__dirname` 或者想要简化模块导入路径的情况时,可以通过安装相应的类型声明包或设置路径别名来解决问题。对于 `__dirname` 不被识别的问题,可以尝试通过安装 `@types/node` 来解决[^4]:
```bash
npm install @types/node --save-dev
```
阅读全文
相关推荐


















