如何为GitHub Pages将环境变量传入vite.config？

将Vite应用部署到GitHub Pages后，原本在开发和预览环境正常的代理配置失效，且虽能在模板中通过{import.meta.env.VITE_RELEASE_NAME}读取环境变量，但不确定如何在vite.config.ts中正确使用这些变量。

以下是我的vite.config.ts配置：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [nodePolyfills(), react()],
    build: {
      outDir: "./dist",
    },
    base: env.VITE_BASE_URL || "/",
    publicDir: "./public",
    server: {
      port: 5173,
      proxy: {
        "/api": {
          target: env.VITE_BACKEND_URL, // Replace with your API's URL
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
          secure: false
        },
      },
    },
  };
});

用于部署的GitHub Actions配置：

name: Deploy my app

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
        with:
          static_site_generator: none

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - uses: oven-sh/setup-bun@v2
        with:
          bun-version: latest

      - name: Install dependencies
        run: bun install --frozen-lockfile

      - name: Debug environment
        run: |
          echo "Repository name: ${{ github.event.repository.name }}"
          echo "Base URL: /${{ github.event.repository.name }}"
          echo "Backend URL: ${{ secrets.VITE_BACKEND_URL }}"
          echo "Release name: ${{ secrets.VITE_RELEASE_NAME }}"
      - name: Build
        run: bun run build
        env:
          VITE_BASE_URL: /${{ github.event.repository.name }}
          VITE_ENV: production
          VITE_BACKEND_URL: ${{ secrets.VITE_BACKEND_URL }}
          VITE_RELEASE_NAME: ${{ secrets.VITE_RELEASE_NAME }}

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./dist

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

解决方案 #

1. 明确Vite代理的适用范围 #

Vite的server.proxy配置仅在开发/预览服务器中生效，GitHub Pages是纯静态站点托管服务，没有后端服务器处理代理请求，因此生产环境下该配置完全无效，这是问题的核心。

2. 调整生产环境API调用方式 #

放弃代理依赖，直接在前端代码中使用完整的后端API地址：

• 将原有类似fetch('/api/data')的请求，修改为：

  fetch(`${import.meta.env.VITE_BACKEND_URL}/data`)
  

• 这样前端会直接请求后端服务，无需代理转发。

3. 解决跨域问题（CORS） #

如果后端服务与GitHub Pages域名不同，需在后端配置CORS规则，允许GitHub Pages的域名（例如https://<你的用户名>.github.io/<仓库名>）作为合法请求源，否则浏览器会拦截跨域请求。

4. 确认环境变量的读取逻辑 #

你的vite.config.ts已经通过loadEnv正确读取环境变量，GitHub Actions中Build步骤传入的VITE_前缀变量会被正常加载。注意：server.proxy仅作用于开发环境，对GitHub Pages部署无影响，可保留用于开发阶段。

5. 验证环境变量传递正确性 #

通过GitHub Actions的Debug environment步骤输出，确认VITE_BACKEND_URL等变量是否正确从仓库Secrets中获取。若输出为空，检查仓库Settings > Secrets and variables > Actions中是否正确添加了对应Secrets。

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