如何使用环境变量作为react vite应用程序标题

如何使用环境变量作为react vite应用程序的标题?

我发现的一个解决方案是,在 index.tsx 文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Set document title dynamically
document.title = import.meta.env.REACT_APP_MY_VARIABLE || 'Default Title';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

但是,当使用中的任何值时

export REACT_APP_MY_VARIABLE=whatever

我总是以 'Default Title' .

下列的 Create React App: using environment variables in index.html ,我将以上内容更改为 process.env :

document.title = process.env.REACT_APP_MY_VARIABLE || 'Default Title';

但现在我的react应用程序只显示一个空页面。

附言

这是一个react vite应用程序,我开始使用它:

npx vite --host

PPS。

解决方案必须为 二者都 开发/测试时间和构建时间。