1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

script
// src/setup/setupFile.jsexport const API_URL = process.env.NODE_ENV === 'production' ? 'https://api.production.com' : 'https://api.development.com';
```### 步骤 3：在 Vite 配置文件中引用 setupFile在 `vite.config.js` 中，使用 `defineConfig` 方法引用 `setupFile`。

```java
script
// vite.config.jsimport { defineConfig } from 'vite';import { API_URL } from './src/setup/setupFile';export default defineConfig({  define: {    'process.env.API_URL': JSON.stringify(API_URL),  },});
```### 步骤 4：在项目中使用配置现在，在项目的任何地方，都可以直接使用 `process.env.API_URL` 来获取 API 接口地址。

```java
script
// src/api/request.jsimport axios from 'axios';const api = axios.create({  baseURL: process.env.API_URL,});export default api;
```## 高级用法### 动态配置`setupFile` 不仅可以定义静态的配置，还可以根据不同的环境动态生成配置。例如，可以根据不同的环境设置不同的 API 密钥。

```java
script
// src/setup/setupFile.jsexport const API_KEY = process.env.NODE_ENV === 'production' ? 'productionKey' : 'developmentKey';
```### TypeScript 支持如果您的项目使用 TypeScript，`setupFile` 也同样支持。只需将文件后缀改为 `.ts`，并相应地配置 TypeScript。
```typescript
// src/setup/setupFile.tsexport const API_URL = process.env.NODE_ENV === 'production' ? 'https://api.production.com' : 'https://api.development.com';
```## 结论通过本文的介绍，相信您已经对 Vite 中的 `setupFile` 配置有了深入的了解。合理利用 `setupFile`，不仅可以提高项目的开发效率，还能增强项目的可维护性。随着您对 Vite 的不断探索和实践，`setupFile` 将成为您项目中不可或缺的一部分。