如何在react应用程序中从package.json访问主页？

• 我们可以使用**PUBLIC_URL*环境变量访问package.json的homepage字段中设置的URL。

我们有时会使用相对URL将应用程序部署到子目录中，例如我们将应用程序部署到https://myhostname.com/example-path中。
为此，我们可以为应用程序构建设置环境变量PUBLIC_URL=/example-path，或者将package.json主页属性设置为"/example-path"。

"homepage": '/example-path/'

那么PUBLIC_URL将被设置为/example-path/。现在，您可以在react应用程序中的任何位置访问此环境变量。

<Router basename={process.env.PUBLIC_URL}>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

运行npm run build之后，您可以在build/index.html中检查您使用%PUBLIC_URL%的所有地方是否都设置为/example-path/，如下所示;

<script type="text/javascript" src="/example-path/static/js/main.ec7f1972.js">

Router不知道你的package.json的任何信息，它只会查看浏览器的位置。如果你使用BrowserRouter，你可以设置一个basename：

import {BrowserRouter as Router} from 'react-router';

<Router basename="/example-path">
    {/* ... */}
</Router>

**编辑：**在react-scripts@0.2.3和更高版本中添加环境变量后，首选@Alan Omars答案：为环境变量添加前缀REACT_APP_，它将在构建时向客户端公开。docs
以下是旧答案，它利用Webpack盲目地将%PUBLIC_URL%替换为index.html这一事实：

假设您使用的是create-react-app，这实际上非常简单：
将以下内容添加到public/index.html：

<script>
  window.PUBLIC_URL = "%PUBLIC_URL%";
</script>

现在你可以从JavaScript引用主页了！只需通过

const myPublicUrl = window.PUBLIC_URL;

注：如果package.json中没有设置homePage字段，则变量将为空字符串，因此我们必须对此进行补偿：

<Router basename={window.PUBLIC_URL && window.PUBLIC_URL.length > 0 ? window.PUBLIC_URL : "/"}>
    {/* ... */}
</Router>

由于您使用的是create-react-app软件包，因此可以在package.json中使用environment variable而不是"homepage":"/example-path"：
1.创建.env文件在这根你的项目.
1.将REACT_APP_HOME_PAGE='/example-path/'添加到.env文件
1.现在，您可以在应用中通过process.env.REACT_APP_HOME_PAGE访问env变量，如下所示：

<Router basename={process.env.REACT_APP_HOME_PAGE}>

我不知道您的路由器文件的位置在哪里，但您可以尝试将其作为json导入由create-react-app cli应用程序创建的src/index.js文件，如下所示;

import myPackageJson from '../package.json';

或

import { homepage } from '../package.json';