如何使用 React with Vite 获取 index.html 中的版本号？

Question

我想在包含当前应用程序版本的 index.html 中创建一个<meta>元素，如下所示：

<meta name="version" content="1.0.0" />

版本号应该来自我的package.json文件。

这在使用 React 和 Vite 时可以以简单的方式完成吗？

Answer 1

先试试这个

将版本添加到 your.env

APP_VERSION=$npm_package_version

然后在你的应用程序中

<meta name="version content={import.meta.env.APP_VERSION} />

如果这不起作用并且您不介意公开 package.json

// you may have to go up or down a directory
// I don't know your app structure

import packageJson from '/package.json';

<meta name="version content={packageJson.version} />

更新

尝试将其添加到您的 app.js 文件中

const useAppVersion = () => {
    useEffect(() => {  
      document.querySelector("meta[name='version']").setAttribute("content", import.meta.env.APP_VERSION || '1.0.0);
    }, []);
};

function App() {
  usePageMeta();
  return (
  ... rest of your app here ...
  )
}