如何在React项目中获取并展示GitHub仓库Release版本号

该需求完全可实现，全程可以做到版本发布后自动同步，不需要手动修改页面代码，以下是3种生产环境常用的实现方案，可根据自己的部署流程选择。

原理是在GitHub打tag触发部署流程时，自动把当前的版本tag值注入到React构建环境变量中，页面直接读取环境变量渲染即可，适配所有React技术栈。

• 如果你用GitHub Actions做CI/CD，在工作流配置中新增步骤，把当前触发部署的tag值写入环境变量：

- name: 注入版本号到构建环境
  run: echo "REACT_APP_VERSION=${GITHUB_REF_NAME}" >> $GITHUB_ENV

*如果是Vite搭建的React项目，变量名需要改成VITE_APP_VERSION，符合Vite的环境变量命名规则。

• 在需要展示版本号的组件中直接读取环境变量渲染即可，以全局页脚组件为例：

function GlobalFooter() {
  return (
    <footer className="site-footer">
      <span>当前版本：{process.env.REACT_APP_VERSION}</span>
      {/* Vite项目替换为 import.meta.env.VITE_APP_VERSION */}
    </footer>
  )
}

后续每次打新tag触发部署，构建流程会自动把最新tag值注入，页面版本号自动更新，不需要改任何业务代码。

如果你每次发版都会先更新package.json中的version字段，再对应打GitHub tag，可以直接读取package.json中的版本号渲染，不需要额外配置CI注入。

• 如果你是Create React App搭建的项目，直接在组件中导入package.json读取版本即可：

import packageConfig from '../package.json'

function VersionBadge() {
  return <span className="version-tag">v{packageConfig.version}</span>
}

• 如果你是Vite搭建的项目，需要先在vite.config.js中增加配置，把版本号暴露给前端代码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import packageConfig from './package.json'

export default defineConfig({
  plugins: [react()],
  define: {
    'import.meta.env.APP_VERSION': JSON.stringify(packageConfig.version)
  }
})

组件中直接读取import.meta.env.APP_VERSION渲染即可。

• 注意事项：需要保证GitHub发版的tag值和package.json中的version字段一致，可以在CI流程中加一行简单的校验逻辑避免两边版本不匹配。

如果你的站点静态资源托管在CDN，不想每次发版都走全量构建流程，可以在部署时生成一份固定路径的版本描述文件，页面加载时拉取该文件获取版本号。

• 在GitHub Actions部署流程中新增步骤，构建完成后生成version.json文件，和其他静态资源一起上传到托管服务：

- name: 生成版本描述文件
  run: echo '{"version":"${GITHUB_REF_NAME}"}' > ./build/version.json

• 组件中在页面加载时请求该文件，拿到版本号后渲染：

import { useEffect, useState } from 'react'

function VersionBadge() {
  const [version, setVersion] = useState('')

  useEffect(() => {
    fetch('/version.json', { cache: 'no-cache' })
      .then(res => res.json())
      .then(data => setVersion(data.version))
  }, [])

  return version ? <span className="version-tag">{version}</span> : null
}

这个方案的灵活性最高，哪怕后续做灰度发布、热修复，只需要更新version.json的内容，页面展示的版本号就能同步，不需要重新编译整个React项目。

避坑提示：不要直接在前端调用GitHub开放接口拉取仓库版本信息，这类方案会遇到跨域、私有仓库鉴权、接口限流等问题，稳定性远低于上述三种构建/部署阶段注入版本的方案。

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