React应用中如何获取浏览器端缓存的package.json版本信息

实现核心逻辑 #

要展示用户浏览器当前缓存的版本号，核心是把package.json中的版本号在构建阶段注入到前端代码中，同时可配套版本校验逻辑提示用户更新。 #

分步实现 #

方法1：直接注入版本号（最简方案） #

React脚手架默认支持读取package.json的字段或通过环境变量注入版本，无需额外配置：

• 如果你用Create React App（CRA）：
  1. 在.env文件新增配置：

  REACT_APP_VERSION=$npm_package_version
  

  2. 在组件内直接读取环境变量即可：

  function Footer() {
    return <div>当前版本：v{process.env.REACT_APP_VERSION}</div>
  }
  

• 如果你用Vite：
  1. 在.env文件新增配置：

  VITE_APP_VERSION=$npm_package_version
  

  2. 组件内读取：

  function Footer() {
    return <div>当前版本：v{import.meta.env.VITE_APP_VERSION}</div>
  }
  

注：该方案拿到的版本号就是当前用户浏览器缓存的JS代码对应的版本，完全和缓存内容匹配。

方法2：支持新版本提示（更实用） #

如果需要检测是否有新版本发布，提示用户刷新清理缓存，可以增加版本校验逻辑：

1. 根目录新增generate-version.js脚本，构建时自动生成版本文件：

const fs = require('fs')
const { version } = require('./package.json')
fs.writeFileSync('./public/version.json', JSON.stringify({ version }))

2. 修改package.json的构建命令，每次构建前自动执行脚本：

{
  "scripts": {
    "build": "node generate-version.js && react-scripts build"
    // Vite用户把后面的构建命令换成vite build即可
  }
}

3. 组件内实现版本对比逻辑：

import { useEffect, useState } from 'react'

// 读取当前代码注入的版本号，就是用户当前缓存的版本
const currentVersion = process.env.REACT_APP_VERSION // Vite用户换import.meta.env.VITE_APP_VERSION

function App() {
  const [showUpdateTip, setShowUpdateTip] = useState(false)

  useEffect(() => {
    // 加时间戳避免缓存version.json文件，每次都拿最新版本
    fetch(`/version.json?t=${Date.now()}`)
      .then(res => res.json())
      .then(latestInfo => {
        if (latestInfo.version !== currentVersion) {
          // 版本不一致说明有新版本，提示用户刷新
          setShowUpdateTip(true)
        }
      })
  }, [])

  return (
    <div>
      {/* 展示当前缓存的版本号 */}
      <footer>当前版本：v{currentVersion}</footer>
      {/* 新版本提示 */}
      {showUpdateTip && (
        <div className="update-tip">
          检测到新版本，<button onClick={() => window.location.reload()}>点击刷新</button>即可使用最新功能
        </div>
      )}
    </div>
  )
}

注意事项 #

• 不要直接导入完整的package.json到前端代码，避免泄露项目依赖等敏感信息，优先用环境变量注入版本号
• React脚手架默认会给构建后的静态资源加内容哈希后缀，只要版本更新构建出来的资源路径就会变化，不会出现新旧版本资源混淆的问题

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