在package.json中使用`＆＃34;主页＆＃34;`，而不会弄乱localhost的路径

Question

此问题实际上直接来自我之前问题的answer。

我在"homepage"添加了package.json，因为它是我在Github Pages上托管的React应用。 npm run build的输出表示现在可以部署/build目录，并假设项目正在/project_name/托管。

但是在localhost上，该项目不在/project_name/托管，因此请求js和css的路径混乱（寻找/project_name/static/...而不是{ {1}}）并且应用程序已损坏。

如何在package.json中拥有主页字段，以便它们可以部署到Github Pages（例如），同时仍然可以使用有效的应用程序在本地开发？

Answer 1

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

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

Answer 2

create-react-app的{​​{3}}解释了如何从不同的相对路径提供相同的构建。

如果您将主页设为

"homepage": ".",

资产将相对于index.html

提供

出于开发目的，使用yarn start或npm start投放已经足够了。应用程序将在localhost中提供

Answer 3

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

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

"homepage": "."

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

此外，如果您不使用react-router，即不进行客户端路由，那么可以安全地使用此hack ..

Answer 4

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

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

或者，如果需要，请在构建用于生产的产品之前删除主页设置并配置环境：

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