使用PUBLIC_URL创建反应应用程序构建

Question

我正在尝试

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

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

但是，public / index.html中％PUBLIC_URL％的出现将替换为空字符串，而不是预期值PUBLIC_URL。

public / index.html包含类似

的代码

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

搜索互联网和堆栈溢出的时间表明，关于PUBLIC_URL的文章很少。我从git hub克隆了create-react-app并且一直在浏览代码，但还没有开悟。

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

Answer 1

如果其他答案不适合您，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",

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

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

当通过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.

Answer 2

这不是PUBLIC_URL变量的使用方式。根据{{​​3}}，您可以在HTML中使用PUBLIC_URL：

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

或者在您的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'} />;
}

PUBLIC_URL不是您设置的值，而是在Webpack的构建系统之外的部署中存储文件的方法。

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

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

您会看到该网址已存在。

在documentation中阅读更多内容。

Answer 3

查看documentation。您可以使用.env文件来获取PUBLIC_URL

虽然你应该记住它用于什么 -

  

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

Answer 4

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

Windows（cmd.exe）

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

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

Linux，macOS（Bash）

 PUBLIC_URL=http://xxxx.com npm start

推荐：cross-env

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

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

Answer 5

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

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

然后将https://dsomething.cloudfront.net中的homepage设置为package.json。

1。快速解决方案

像这样构建您的项目：
（Windows）

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

（Linux）

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

（mac）
-不确定-

你会得到

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

在您建立的index.html中

2。永久和推荐的解决方案

在项目根目录（package.json所在的位置）创建一个名为.env的文件。
在此文件中写下以下内容（网址不加引号）：

PUBLIC_URL=https://dsomething.cloudfront.net

照常构建项目（npm run build）
这还将生成带有以下内容的index.html：

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

3。奇怪的解决方案

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

然后将使用以下命令生成index.html：

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

与以下基本相同：

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

在我的理解中。

Github Issue Github Comment

Answer 6

您做错了，是期望PUBLIC_URL和process.env.PUBLIC_URL具有相同的值。

create-react-app具有两个不同的PUBLIC_URL：

1. 位于流程环境或package.json主页中的那个。
2. 一个in节点process.env。

进程环境PUBLIC_URL覆盖任何package.json主页。它可以是带有方案，主机和路径的完整URL。主机将用于提供正确的部署说明。

process.env.PUBLIC_URL只是来自流程环境PUBLIC_URL或主页的路径。

因此，当您运行

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

在React中，您将拥有

process.env.PUBLIC_URL === ''

如果有

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

在React中，您将拥有

process.env.PUBLIC_URL === '/foo'

Answer 7

不确定为什么你无法设置它。在source中，PUBLIC_URL优先于homepage

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

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

Answer 8

由于documented here create-react-app将仅导入以REACT_APP_开头的环境变量，因此，我相信PUBLIC_URL来自{{1 }}设置在homepage文件中。

Answer 9

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

我如何解决这个问题，

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

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

这就是我要做的。

查看托管在GitHub页面上的工作示例，网址为

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

Answer 10

此解决方案适用于 Linux bash 命令行：

1. 转到您的 React 项目根目录。
2. 在该目录中打开 bash 终端。
3. 之后运行以下两个命令，您将看到 PUBLIC_URL 发生了变化：

> export PUBLIC_URL=https://example.com
> npm run build

Answer 11

如果 "0x01" 环境变量没有效果，可能是由于 this[1] 问题，导致 PUBLIC_URL 在开发中被忽略。它已在 create-react-app 版本 3.4.0 中修复。

[1]：https://github.com/facebook/create-react-app/issues/6135

Answer 12

在应用程序源中打开命令提示符。 运行命令

  

    

npm运行弹出

  

打开您的 scripts / build.js 文件，并将其添加到“使用严格”行之后的文件开头

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the (current) path which you want to set here.
.....

运行

  

    

npm运行构建