如何在React+Vite项目的index.html中获取版本号？

当然可以，Vite本身提供了几种简单的实现方式，这里给你两种最直接的：

方法1：直接在index.html中使用EJS模板语法 #

Vite默认支持在项目的index.html中使用EJS模板语法，你可以直接读取package.json里的版本号：

<meta name="version" content="<%= require('./package.json').version %>" />

启动开发服务或者执行构建时，Vite会自动把require('./package.json').version替换成你package.json里实际的版本号。

方法2：通过Vite配置注入全局变量 #

如果你希望更灵活地控制版本号的使用（比如同时在React组件里也能用到），可以在vite.config.js中配置全局变量：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 读取package.json
import pkg from './package.json' assert { type: 'json' }

export default defineConfig({
  plugins: [react()],
  define: {
    // 将版本号转为字符串注入全局
    '__APP_VERSION__': JSON.stringify(pkg.version)
  }
})

然后在index.html中通过EJS语法引用这个全局变量：

<meta name="version" content="<%= __APP_VERSION__ %>" />

这种方式的好处是，你在React组件里也可以直接用__APP_VERSION__来获取版本号，比如：

function App() {
  return <div>当前版本：{__APP_VERSION__}</div>
}

两种方法都不需要额外安装依赖，完全基于Vite的内置能力就能实现。

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