在package.json中使用``homepage``,而不会弄乱localhost的路径

Question

这个问题实际上是直接从我如下的回答对前一个问题.

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

但是在localhost上,项目没有被托管/project_name/,因此请求js和css的路径搞砸了(寻找/project_name/static/...而不是/static/...)并且应用程序被破坏了.

如何在package.json中拥有主页字段,以便它们可以部署到Github Pages(例如),同时仍然使用工作应用程序在本地开发？

Answer 1

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

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

Answer 2

对于还涵盖react-router-dom的一体化答案：

添加package.json['homepage']为您的生产 URL。需要注意的是，CRA 构建步骤删除了 URL 的域部分，只留下索引路径。
为本地主机构建时，请执行以下操作PUBLIC_URL=/ npm run build
按照本文的建议添加<base href="%PUBLIC_URL%" />到您的页面中；它将提供对资源（img、CSS）的支持，并将公开供以后重用。public/index.html%PUBLIC_URL%
在创建 BrowserRouter 的组件（通常是 App.js 或 main.js）中，添加：
```
const basename = document.querySelector('base')?.getAttribute('href') ?? '/'    
```
Run Code Online (Sandbox Code Playgroud)
用于：<BrowserRouter basename={basename} />

Answer 3

文档的create-react-app解释了如何从不同的相对路径服务相同的构建.

如果你把主页作为

"homepage": ".",

资产将相对于 index.html

出于开发目的,使用yarn start或npm start足够好.应用程序将在localhost中提供

答案与问题不符. (3认同)
反应家伙不推荐这... https://github.com/facebook/create-react-app/issues/1487#issuecomment-277727669 (3认同)
@NadeemJamali在此之后的一些评论中，他们提到正式发布此功能https://github.com/facebook/create-react-app/issues/1487#issuecomment-278871994，但请注意，它不适用于客户端路由。 (2认同)

Answer 4

例如，问题可能是因为“index.html”文件指向“/static/js/...js”，如果我们在根文件夹中发布应用程序，这将起作用，但是如果您在根文件夹中有各种静态开发使用同一台 Apache 服务器的同一台机器出现问题。

使用以下命令配置 Package.json：

"homepage": "."

这将使用相对路径，而不是在当前文件夹中使用绝对路径。即“./static/js/...js” 进行此更改时最常见的错误是插入“./”而不是“.”。

此外，如果您没有使用 react-router，即没有客户端路由，那么没有这个 hack 应该是安全的。

Answer 5

您可以使用 dev shell 环境覆盖主页设置：

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

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

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