GitHub Actions环境变量未在Vite构建中加载，React部署GitHub Pages失败

问题核心原因 #

你的配置存在三个关键问题导致环境变量无法正确加载：

1. Vite配置中引用的环境变量名称与workflow中定义的不匹配
2. GitHub Actions环境变量的YAML写法错误（多余引号）
3. 可选：envDir配置可能干扰环境变量读取优先级

分步解决方案 #

1. 修正Vite配置中的环境变量名称 #

在vite.config.js中，你使用了process.env.REPO_NAME，但workflow里定义的是VITE_REPO_NAME。Vite要求环境变量必须以VITE_为前缀才能被注入到应用中，同时补充斜杠确保GitHub Pages路径格式正确：

export default defineConfig({
  // ...
  base: process.env.NODE_ENV === 'production'
    ? `/${process.env.VITE_REPO_NAME}/` || '/'
    : '/',
  // 若不需要从本地environment目录加载.env文件，可移除envDir配置；若需保留，确保GitHub Actions环境中该目录存在对应文件
  // envDir: 'environment'
})

2. 修正GitHub Actions工作流的环境变量写法 #

在.github/workflows/static.yml中，VITE_SERVER_URL的赋值带有多余引号，YAML会将引号作为变量值的一部分，导致Vite读取到错误的URL：

# ...

env:
  VITE_REPO_NAME: ${{ github.event.repository.name }}
  VITE_SERVER_URL: https://this-is-a-server-url.com # 去掉引号，使用标准YAML键值对写法
  
jobs:
  deploy:
    # ... 其他配置保持不变

3. 验证环境变量加载（可选） #

如果仍有问题，可在Build步骤中添加打印命令，确认环境变量是否被正确读取：

- name: Build
  run: |
    echo "VITE_REPO_NAME=$VITE_REPO_NAME"
    echo "VITE_SERVER_URL=$VITE_SERVER_URL"
    npm run build

验证部署 #

完成修改后重新触发部署：

• 查看Build步骤的日志，确认环境变量已正确输出
• 部署完成后检查页面，确认base路径和接口URL已正常加载

内容的提问来源于stack exchange，提问作者Adora González