GitHub Actions步骤输出存为环境变量后前端无法读取求助

你的问题核心在于：GitHub Actions步骤中设置的环境变量仅在CI/CD的运行环境中生效，前端代码运行在浏览器环境，和CI环境完全隔离，自然无法直接读取到这个变量。要让前端能访问到版本号，必须在前端构建阶段把变量注入到代码中。

具体解决步骤 #

1. 确认前端框架的环境变量规则 #

不同前端框架对注入环境变量有特定要求：

• Create React App：变量必须以REACT_APP_开头
• Vue.js：变量必须以VUE_APP_开头
• Vite：变量必须以VITE_开头

2. 在构建步骤中注入变量 #

修改你的GitHub Actions工作流，在前端构建步骤中传入版本号变量，替换原来无效的单独设置环境变量步骤。示例如下：

# 保留你原来的Set outputs步骤
- name: Set outputs
  id: vars
  run: |
    # 确保TEST_COUNTER是数字格式的secret，否则加法会报错
    counter=$((${{ secrets.TEST_COUNTER }} + 1))
    echo "::set-output name=counter::$counter"
    echo "::set-output name=version_number::V${{ secrets.VERSION_NUMBER }}-beta-$counter"

# 替换原来的setup env variable步骤，改为构建时注入变量
- name: Build frontend
  run: npm run build
  env:
    # 根据你的框架修改前缀，这里以Create React App为例
    REACT_APP_APPLICATION_VERSION: ${{ steps.vars.outputs.version_number }}

3. 前端代码中访问变量 #

在前端代码中直接使用框架规定的环境变量：

// React示例
console.log(process.env.REACT_APP_APPLICATION_VERSION);

// Vue示例
console.log(process.env.VUE_APP_APPLICATION_VERSION);

// Vite示例
console.log(import.meta.env.VITE_APPLICATION_VERSION);

额外注意事项 #

• 如果你的前端是纯静态HTML，没有使用框架，可以通过构建阶段替换HTML中的占位符实现：

  - name: Inject version into HTML
    run: sed -i "s/VERSION_PLACEHOLDER/${{ steps.vars.outputs.version_number }}/g" dist/index.html
  

  然后在HTML中预留占位符：<span>版本：VERSION_PLACEHOLDER</span>
• 确保secrets.VERSION_NUMBER和secrets.TEST_COUNTER已正确设置为有效值，否则生成的version_number会异常。

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