logo标签列表

构建后index.html中的相对路径

reactjsbuildpathcreate-react-appreact-scripts
121

你好，我有一个ReactJS应用程序，并使用以下命令构建我的项目：

npm build

这是我的package.json文件:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"},

在构建完成后，我会得到一个包含构建文件和index.html文件的文件夹。但是这个html中的所有路径都是绝对路径，我希望使用相对路径构建。
例如（index.html）：现在我有： 
<script type="text/javascript" src="/static/js/main.af2bdfd5.js"></script>
<link href="/static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico">

i want this:

<script type="text/javascript" src="./static/js/main.af2bdfd5.js"></script>
<link href="./static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="./favicon.ico">
1
尝试使用html-webpack-plugin，它在将来部署时是独一无二的必需品。 - Artem Mirchenko
7个回答
265
// package.json
{
  "name": "your-project-name",
  "version": "0.1.0",
  "homepage": "./", # <--- Add this line ----
  ...
}

再次运行npm run build。

这将更改路径为./，这是您项目的相对路径。

6
官方文档也涵盖了这个主题。链接在此：https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths - Alex Glukhovtsev
7
文档已经更新，建议使用 "." 而不是 "./". 参见 这个 Github 问题。 - federicober
当我使用“.”或“./”时，我可以看到所有路径现在都有一个点在开头，但是浏览器似乎忽略了那个点，仍然尝试从根目录中获取。我不明白为什么React构建不会只删除开头的正斜杠？ - Jason Farnsworth
添加点号会破坏我的资源路径。 - Yairopro
1
非常有帮助。很难找到。我正在使用Photino.io构建React JS，为.NET跨平台应用程序创建UI，但package.json没有使用它，因此无法在正确的目录中找到资源。这完美地解决了这个问题。 - raddevus
38
3
这个修复似乎只适用于由create-react-app创建的项目？ - Mr. 14
奇怪，这应该是默认结果吗？从投票数量来看，当前的默认选择似乎是意外的或不自然的选择。 - user.dz
11

我使用Vite作为我的构建引擎，而不是CRA。它似乎根本不查看package.json中的homepage选项。为了解决这个问题，我在我的脚本中添加了一个新的构建选项，设置基础URL如下：

"scripts": {
   "production": "tsc && vite build --base=./"
}

文档可以在这里找到。希望这能帮助到有需要的人。

我知道这并没有回答问题，但像我一样遇到同样问题的人可能会偶然发现这个信息。
1
你是传奇！ - orindholt
1
使用Vite的任何人都应该赞同这个答案。其他方法都不起作用，甚至没有意义:) - John Yepthomi
8

如果你正在使用webpack，你可以尝试将publicPath设置为./

你可以在这里阅读更多相关信息。

2
正如评论中所提到的，React 的文档涵盖了这个主题。

https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths

Facebook建议安装工具env-cmd，创建一个带有环境变量的文件和一个在package.json中运行的脚本。
这是一个好的概念，但不幸的是，这个修复方法由于两个原因而无法正常工作。
首先，env-cmd要求路径以“./”开头：
"scripts": {
    ...,
    "build:staging": "env-cmd -f ./.env.staging yarn run build"
}

其次，我不确定环境变量REACT_APP_API_URL的用途是什么，但至少在create-react-app中它是PUBLIC_URL。创建一个名为.env.staging的文件，并使用以下内容解决了我的问题：
PUBLIC_URL=/projects/my-project

我认为构建工具的创建者应该让将应用部署到子文件夹更加容易。
2

如果您的应用程序直接使用React构建，则在package.json中将homepage设置为"./"或空字符串""。

如果您的网站是使用子React JS构建的，对我而言是Next.js，那么我在next.config.js中将"basePath"设置为空字符串""，问题得到解决。

0
上述的解决方案对我没有起作用。我的解决方案如下：
1. 确保在 index.hmtl 中设置了基本 URL。
<base url="%PUBLIC_URL%" />

不要在package.json中设置homepage。 在.env文件中，将PUBLIC_URL设置为您想要提供应用程序的路径。这不应包括域名，以便可以将构建部署到多个环境（开发、生产等）。 在任何入口配置中，使用与PUBLIC_URL相同的路径。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接