在 package.json 中使用“主页”，而不会打乱 localhost 的路径

这个问题实际上是直接从我的 回答上一个问题。

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

但是在本地主机上，项目是 没有在 /project_name/托管，所以 js 和 css 被请求的路径是混乱的(寻找 /project_name/static/...而不是 /static/...)和应用程序中断。

如何在 package.json 中使用主页字段，以便他们可以部署到 Github Pages (例如) ，同时仍然可以使用一个工作的应用程序在本地进行开发？

157636 次浏览
小开

针对 create-react-app的文档 解释了如何从不同的相对路径为相同的构建提供服务。

如果你把主页设为

"homepage": ".",

资产将相对于 index.html提供服务。然后你就可以将你的应用程序从 http://mywebsite.example移动到 http://mywebsite.example/relativepath，甚至是 http://mywebsite.example/relative/path，而不需要重建它。

出于开发目的，使用 yarn start或 npm start服务已经足够了。应用程序将在本地主机中提供

小开

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

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

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

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

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

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

对于来这里寻找 还有所涵盖的反应路由器一体化解决方案的人来说:

  1. 添加 package.json['homepage']作为您的生产网址。需要注意的是，CRA 构建步骤删除 URL 的域部分，只保留索引的路径。

  2. 为 localhost 构建时，执行 PUBLIC_URL=/ npm run build

  3. 按照 这篇文章中的建议，在 public/index.html页面中添加 <base href="%PUBLIC_URL%" />; 它将提供对资产(img，css)的支持，并将公开 %PUBLIC_URL%以供以后重用。

  4. 在创建 BrowserRouter (通常是 App.js 或 main.js)的组件中，添加:

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

  5. 用作: <BrowserRouter basename={basename} />

小开

我也遇到过类似的情况，当我将“主页”添加到 package.json 并将其部署到 gh- 页面时，图像将不会出现。在尝试了许多不同的解决方案之后，我最终通过将映像从公用文件夹转移到 src 文件夹来解决这个问题。然后我换了一个:

 <img src="/img/image.JPG" alt="image" />

到

<img src={require('../../assets/image.JPG')} alt="image" />

这好像对我有用！


提交答案