如何在Vite React项目的vite.config.js中配置环境变量？

步骤1：创建并配置.env文件 #

在项目根目录创建对应环境的.env文件（开发环境用.env.development，生产环境用.env.production），添加以下内容：

VITE_PROXY_URL=http://localhost:5000/

注意：Vite要求环境变量必须以VITE_开头才能被识别读取

步骤2：修改vite.config.js读取环境变量 #

更新你的vite.config.js，直接通过process.env获取配置的代理地址：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: process.env.VITE_PROXY_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

修正说明：原代码中的正则表达式/^/api/存在语法错误，已改为/^\/api/（转义斜杠）

步骤3：部署时的环境变量加载 #

• 本地开发时，Vite会自动根据当前模式（默认development）加载对应的.env文件
• 生产部署时，可直接在部署环境（服务器、CI/CD平台等）中配置VITE_PROXY_URL环境变量，或在构建前生成对应环境的.env文件

额外注意事项 #

• 不要将.env文件提交到版本控制，确保它已添加到.gitignore中
• 不同环境可通过不同的.env文件区分：.env.development（开发）、.env.production（生产）、.env.test（测试），Vite会自动匹配加载

内容的提问来源于stack exchange，提问作者ashutosh887