在 Vite 项目（包括 electron-vite）中配置环境变量是一个非常核心且实用的功能。它能让你在不同环境（开发、测试、生产）中使用不同的配置，例如 API 的基础路径。

下面是详细的配置步骤和说明。

---

第一步：创建 .env 环境文件

Vite 使用 dotenv 来加载环境变量文件。你需要在项目的 根目录（与 package.json 同级）下创建这些文件。

1. .env.development：这个文件里的变量只在 开发环境 (npm run dev) 中生效。

2. .env.production：这个文件里的变量只在 生产环境 (npm run build) 中生效。

3. .env：这个文件里的变量在 所有环境 中都会被加载，但会被特定环境文件（如 .env.development）中的同名变量覆盖。通常用来存放共享的、不敏感的变量。

创建文件：

在你的项目根目录下，创建以下两个文件：

/.env.development

# 开发环境配置

# VITE_ 开头是约定，只有这样 Vite 才会将其暴露给客户端代码
# 这里我们指向一个本地的开发服务器或一个代理地址
VITE_BASE_API = '/api'

/.env.production

# 生产环境配置

# 指向你真实的生产环境 API 地址
VITE_BASE_API = 'https://api.your-production-domain.com'

重要约定：

1. 变量名必须以 VITE_ 开头，否则 Vite 不会将其暴露给你的前端代码 (import.meta.env)，这是一种安全措施，防止意外泄露服务器端的敏感密钥。

2. 不需要安装任何额外的包，Vite 内置了对这些文件的支持。

---

第二步：在代码中使用环境变量

现在，你可以在你的渲染器进程代码中通过 import.meta.env.VARIABLE_NAME 来访问这些变量。

在你之前封装的 Axios 文件 (src/renderer/src/api/request.ts) 中，这行代码现在可以正常工作了：

// src/renderer/src/api/request.ts
import axios from 'axios'

const service = axios.create({
  // Vite 会根据当前环境（dev 或 build）自动选择正确的值
  baseURL: import.meta.env.VITE_BASE_API, 
  timeout: 10000,
  // ...
})

// ...

它是如何工作的？

• 当你运行 npm run dev 时，Vite 会加载 .env.development 文件，此时 import.meta.env.VITE_BASE_API 的值将是 '/api'。

• 当你运行 npm run build 时，Vite 会加载 .env.production 文件，此时 import.meta.env.VITE_BASE_API 的值将是 'https://api.your-production-domain.com'。

---

第三步：（可选但推荐）配置 Vite 代理解决开发环境跨域

在 .env.development 中，我们把 VITE_BASE_API 设置成了 '/api'。这是一个相对路径，如果你直接用它请求，会请求到 http://localhost:5173/api/...（假设你的 Vite 开发服务器在 5173 端口），这通常不是你后端 API 的地址，会导致 404 错误。

我们需要配置 Vite 的 开发服务器代理 (proxy)，将所有 /api 开头的请求转发到你真实的后端服务器地址，从而解决开发环境下的跨域问题。

修改 electron.vite.config.ts 文件：

打开项目根目录下的 electron.vite.config.ts，在 renderer 配置对象中添加 server.proxy 选项。

// electron.vite.config.ts
import { resolve } from 'path'
import { defineConfig, externalizeDeps } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: {
    // ... 其他 renderer 配置
    plugins: [vue()],
    // 添加 server 配置块
    server: {
      proxy: {
        // 字符串简写写法
        // '/foo': 'http://localhost:4567',
        
        // 选项写法
        '/api': {
          target: 'http://your-real-backend-api.com', // 你真实后端 API 的地址
          changeOrigin: true, // 必须设置为 true，否则后端可能会因为 origin 不匹配而拒绝请求
          // 将请求路径中的 /api 前缀去掉
          rewrite: (path) => path.replace(/^\/api/, '') 
        }
      }
    }
  }
})

代理配置解释：

• '/api': 这是一个 key，表示所有以 /api 开头的请求路径都会被这个代理规则匹配。

• target: 目标服务器地址。当你的前端代码请求 http://localhost:5173/api/user/login 时，Vite 开发服务器会把这个请求转发到 http://your-real-backend-api.com/api/user/login。

• changeOrigin: true: 修改请求头中的 Origin 字段，使其与 target 的源一致。这是解决跨域问题的关键步骤。

• rewrite: (path) => path.replace(/^\/api/, ''): 这是一个路径重写规则。很多时候，后端 API 的路径本身不包含 /api 这个前缀（例如，真实的路径是 /user/login 而不是 /api/user/login）。这个配置会在转发请求前，将路径中的 /api 删除掉。

  • 请求 http://localhost:5173/api/user/login

  • 被转发到 http://your-real-backend-api.com/user/login ( /api 被移除了)

总结

1. 创建环境文件：在项目根目录创建 .env.development 和 .env.production。

2. 定义变量：在文件中用 VITE_ 开头定义变量，如 VITE_BASE_API。

3. 使用变量：在代码中通过 import.meta.env.VITE_BASE_API 访问。

4. 配置代理（开发环境）：在 electron.vite.config.ts 的 renderer.server.proxy 中设置代理，将开发环境的 API 请求 (/api) 转发到真实的后端地址，解决跨域问题。

这样，你的项目就拥有了一套健壮、灵活的环境变量配置方案。开发时无缝对接后端接口，打包后自动切换到生产 API 地址。