Javascript 无法使用自定义 PUBLIC_URL 构建 create-react-app 项目

Can't build create-react-app project with custom PUBLIC_URL

提问by Gulliver Smith

I'm trying

我想

PUBLIC_URL=http://example.com npm run build

with a project built using the latest create-react-script.

使用最新的 create-react-script 构建的项目。

However, the occurrences of %PUBLIC_URL%in public/index.htmlare replaced with an empty string, not the expected value PUBLIC_URL.

但是，出现的%PUBLIC_URL%inpublic/index.html被替换为空字符串，而不是预期值PUBLIC_URL。

public/index.htmlcontains code like

public/index.html包含类似的代码

<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

Hours of searching the internet and stack overflow show that very little is written about PUBLIC_URL. I cloned create-react-app from GitHub and have been browsing the code but have not yet been enlightened.

数小时的互联网搜索和堆栈溢出表明，关于PUBLIC_URL. 我从GitHub上克隆了create-react-app，一直在浏览代码，但尚未开悟。

Does anyone have any suggestions as to what I'm doing wrong?

有没有人对我做错了什么有任何建议？

回答by redbmk

If the other answers aren't working for you, there's also a homepagefield in package.json. After running npm run buildyou should get a message like the following:

如果其他的答案不为你工作，还有一个homepage在外地package.json。运行后，npm run build您应该收到如下消息：

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

You would just add it as one of the root fields in package.json, e.g.

您只需将其添加为 中的根字段之一package.json，例如

{
  // ...
  "scripts": {
    // ...
  },
  "homepage": "https://example.com"
}

When it's successfully set, either via homepageor PUBLIC_URL, you should instead get a message like this:

通过homepage或成功设置后，PUBLIC_URL您应该收到如下消息：

The project was built assuming it is hosted at https://example.com.
You can control this with the homepage field in your package.json.

回答by Vaibhav Vishal

People like me who are looking for something like this in in build:

像我这样的人在构建中寻找这样的东西：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Then setting https://dsomething.cloudfront.netto homepagein package.jsonwill not work.

然后设置https://dsomething.cloudfront.net为homepageinpackage.json将不起作用。

1. Quick Solution

1. 快速解决方案

Build your project like this:
(windows)

像这样构建你的项目：
（windows）

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build

(linux/mac)

(Linux/Mac)

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

And you will get

你会得到

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

in your built index.html

在您构建的 index.html 中

2. Permanent & Recommended Solution

2. 永久推荐方案

Create a file called .envat your project root(same place where package.json is located).
In this file write this(no quotes around the url):

创建一个.env在项目根目录下调用的文件（package.json 所在的位置）。
在这个文件中写下这个（网址周围没有引号）：

PUBLIC_URL=https://dsomething.cloudfront.net

Build your project as usual (npm run build)
This will also generate index.html with:

像往常一样构建你的项目 ( npm run build)
这也将生成 index.html ：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3. Weird Solution

3.奇怪的解决方案

Add this in your package.json
"homepage": "http://://dsomething.cloudfront.net",

将此添加到您的 package.json
“主页”：“ http://dsomething.cloudfront.net”，

Then index.html will be generated with:

然后 index.html 将生成：

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Which is basically the same as:

这与以下内容基本相同：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

in my understanding.

在我的理解中。

Github IssueGithub Comment

Github 问题Github 评论

回答by Toby

That is not how the PUBLIC_URL variable is used. According to the documentation, you can use the PUBLIC_URL in your HTML:

这不是 PUBLIC_URL 变量的使用方式。根据文档，您可以在 HTML 中使用 PUBLIC_URL：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Or in your JavaScript:

或者在你的 JavaScript 中：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

The PUBLIC_URL is not something you set to a value of your choosing, it is a way to store files in your deployment outside of Webpack's build system.

PUBLIC_URL 不是您设置为您选择的值的东西，它是一种在 Webpack 构建系统之外的部署中存储文件的方法。

To view this, run your CRA app and add this to the src/index.jsfile:

要查看此内容，请运行您的 CRA 应用程序并将其添加到src/index.js文件中：

console.log('public url: ', process.env.PUBLIC_URL)

console.log('public url: ', process.env.PUBLIC_URL)

You'll see the URL already exists.

你会看到 URL 已经存在。

Read more in the CRA docs.

在CRA 文档中阅读更多内容。

回答by JimmyLv

Actually the way of setting environment variables is different between different Operating System.

实际上，不同操作系统之间设置环境变量的方式是不同的。

Windows (cmd.exe)

Windows (cmd.exe)

set PUBLIC_URL=http://xxxx.com&&npm start

(Note: the lack of whitespace is intentional.)

（注意：缺少空格是有意的。）

Linux, macOS (Bash)

Linux、macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

Recommended: cross-env

受到推崇的： cross-env

{
  "scripts": {
    "serve": "cross-env PUBLIC_URL=http://xxxx.com npm start"
  }
}

ref: create-react-app/README.md#adding-temporary-environment-variables-in-your-shell at master · facebookincubator/create-react-app

参考：create-react-app/README.md#adding-temporary-environment-variables-in-your-shell at master · facebookincubator/create-react-app

回答by Dave

Have a look at the documentation. You can have a .env file which picks up the PUBLIC_URL

查看文档。你可以有一个 .env 文件来获取 PUBLIC_URL

Although you should remember that what its used for -

虽然你应该记住它的用途 -

You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.

您可以使用此变量强制将资产逐字引用到您提供的 url（包括主机名）。这在使用 CDN 托管您的应用程序时特别有用。

回答by dosentmatter

Not sure why you aren't able to set it. In the source, PUBLIC_URLtakes precedence over homepage

不知道为什么你不能设置它。在源代码中，PUBLIC_URL优先于homepage

const envPublicUrl = process.env.PUBLIC_URL;
...
const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

You can try setting breakpoints in their code to see what logic is overriding your environment variable.

您可以尝试在他们的代码中设置断点，以查看覆盖您的环境变量的逻辑。

回答by Sean Bradley

This problem becomes apparent when you try to host a react app in github pages.

当您尝试在 github 页面中托管 React 应用程序时，此问题变得明显。

How I fixed this,

我是如何解决这个问题的，

In in my main application file, called app.tsx, where I include the router. I set the basename, eg, <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

在我的主应用程序文件中，称为app.tsx，其中包含路由器。我设置了基本名称，例如， <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

Note that it is a relative url, this completely simplifies the ability to run locally and hosted. The basename value, matches the repository title on GitHub. This is the path that GitHub pages will auto create.

请注意，它是一个相对 url，这完全简化了在本地运行和托管的能力。basename 值与 GitHub 上的存储库标题匹配。这是 GitHub 页面将自动创建的路径。

That is all I needed to do.

这就是我需要做的所有事情。

See working example hosted on GitHub pages at

请参阅托管在 GitHub 页面上的工作示例，网址为

https://sean-bradley.github.io/Seans-TypeScript-ReactJS-Redux-Boilerplate/

https://sean-bradley.github.io/Seans-TypeScript-ReactJS-Redux-Boilerplate/

回答by TobyG

As documented herecreate-react-app will only import environment variables beginning with REACT_APP_, so the PUBLIC_URL, I believe, as mentioned by @redbmk, comes from the homepagesetting in the package.jsonfile.

正如这里所记录的，create-react-app 只会导入以 开头的环境变量REACT_APP_，所以PUBLIC_URL我相信，正如@redbmk 所提到的，来自文件中的homepage设置package.json。