在 package.json 中使用 `"homepage"`，不会弄乱 localhost 的路径答案

【问题标题】：Using `"homepage"` in package.json, without messing up paths for localhost在 package.json 中使用 `"homepage"`，不会弄乱 localhost 的路径
【发布时间】：2017-03-25 00:35:35
【问题描述】：

这个问题实际上直接来自我的answer 上一个问题。

我在我的package.json 中添加了一个"homepage"，因为它是我在 Github Pages 上托管的一个 React 应用程序。 npm run build 的输出表明现在可以部署 /build 目录，并且假定项目托管在 /project_name/。

但是在 localhost 上，该项目不托管在 /project_name/，因此为 js 和 css 请求的路径被弄乱了（寻找 /project_name/static/... 而不是 /static/...）和应用坏了。

如何在 package.json 中包含 homepage 字段，以便他们可以部署到 Github Pages（例如），同时仍然使用工作应用进行本地开发？

【问题讨论】：

您找到解决此问题的方法了吗？
我在我的服务器上使用 express。我通过让我的客户端从 create-react-app 为您提供的内置开发服务器服务（连接到您的标准 localhost:3000）解决了这个问题，但随后也在 localhost:9000 上启动了我的快速服务器并让我的客户端在开发时将 API 调用指向该端口。因此 index.html、assets 等由 create-react-app 的内置服务器提供服务，而 API 调用则由我自己的服务器在不同端口上提供服务。所以我有 2 台服务器正在开发中。但是在 prod 上，我的 express 服务器从 build 目录为客户端（index.html、assets 等）提供服务。

标签： reactjs create-react-app

【解决方案1】：

Docs for create-react-app 解释了如何从不同的相对路径提供相同的构建。

如果你把主页设为

"homepage": ".",

将相对于index.html 提供资产。然后，您将能够将您的应用从 http://mywebsite.com 移动到 http://mywebsite.com/relativepath 甚至 http://mywebsite.com/relative/path，而无需重新构建它。

出于开发目的，使用yarn start 或npm start 服务就足够了。应用程序将在 localhost 中可用

【讨论】：

答案与问题不符。
React 的人不建议这样做...github.com/facebook/create-react-app/issues/…
@NadeemJamali 之后的几个 cmets 他们提到正式发布此功能github.com/facebook/create-react-app/issues/…，但请注意它不适用于客户端路由。
看起来这篇文章的主页可以与客户端路由一起使用：medium.com/@svinkle/…
@Rohmer，你是对的。他们确实有一个拉取请求。我不确定使用 CRA 进行客户端路由。这对我来说一直很痛苦。

【解决方案2】：

您可以使用PUBLIC_URL 环境变量来覆盖特定构建的主页。最好将它设置在你的 package.json 中，例如：

{
  // ...
  "scripts": {
    "build": "react-scripts build",
    "build-localhost": "PUBLIC_URL=/ react-scripts build"
    // ...
  }
  // ...
}

【讨论】：

我一直在尝试这个，虽然它似乎在某种程度上有效（应用程序现在托管在“/”），但在我的代码中引用 %PUBLIC_URL% 或 process.env.PUBLIC_URL 的任何地方仍然获取 package.json 中“主页”属性中设置的值。但是，如果我在 .env 文件中更改它，它确实会更改这些变量。知道我做错了什么吗？
这对我有用！ gh-pages 需要 package.json 中的主页值，所以它会破坏其他东西有点烦人，但这有效！
工作正常。当我 npm start 时，浏览器打开指向这个变量。谢谢！
在我的 Windows 设置中，PUBLIC_URL=/ 被翻译成 %2520，所以我只写 PUBLIC_URL=（空白）就可以了

【解决方案3】：

您可以使用您的开发外壳环境覆盖主页设置：

$ export PUBLIC_URL=http://localhost:3000/ 
$ yarn start

或者，如果您愿意，在构建生产环境之前删除您的主页设置并配置您的环境：

$ export PUBLIC_URL=http://example.com/subdir 
$ yarn build

【讨论】：

在 package.json 中设置主页对我来说从来没有用过，但确实如此。
" export PUBLIC_URL=localhost:3000 " 这个命令对我有用。非常感谢。

【解决方案4】：

对于来这里寻找一体化答案的人，也涵盖了 react-router-dom：

添加package.json['homepage'] 作为您的生产网址。需要注意的是，CRA 构建步骤会删除 url 的域部分，只留下索引的路径。
为本地主机构建时，请执行PUBLIC_URL=/ npm run build
按照this article 的建议，在您的public/index.html 页面中添加<base href="%PUBLIC_URL%" />；它将提供对资产（img、css）的支持，并将公开%PUBLIC_URL% 以供以后重用。

在创建 BrowserRouter 的组件中（通常是 App.js 或 main.js），添加：

const basename = document.querySelector('base')?.getAttribute('href') ?? '/'

用作：<BrowserRouter basename={basename} />

【讨论】：