主页 / coding / 问题 / 77714583
Accepted
xpt
Asked: 2023-12-26 02:06:19 +0800 CST

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

  • 772

如何使用环境变量作为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'.

在创建 React App：使用 index.html 中的环境变量之后 ，我将上面的内容更改为process.env：

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

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

附言。

这是一个 React vite 应用程序，我从以下内容开始：

npx vite --host

聚苯硫醚。

该解决方案必须适用于开发/测试时间和构建时间。

javascript

1 个回答

  1. Best Answer

    为了在 Vite 中公开自定义环境变量，它们需要带有前缀VITE_：https://vitejs.dev/guide/env-and-mode。

    您可能想要使用import.meta.env.VITE_APP_TITLE和设置该VITE_APP_TITLE变量。

    • 1

相关问题