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

我在努力

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

with a project built using the latest 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的文章。我从 GitHub 上克隆了 create-response-app，一直在浏览代码，但还没有得到启发。

对于我做错了什么，有人有什么建议吗？

202001 次浏览
小开

PUBLIC _ URL 变量不是这样使用的。根据 文件，您可以在 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)

您将看到 URL 已经存在。

阅读更多 CRA docs。

小开

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

Windows (cmd.exe)

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

(注意: 缺少空格是故意的。)

Linux，macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

推荐: cross-env

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

ref: Create-response-app/README.md # adding- 兼容-临时-环境-变量-in-your-shell at master · facebook 孵化器/create-response-app

小开

如果其他答案对你不起作用，那么在 package.json中还有一个 homepage字段。在运行 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.
小开

看一下 documentation。您可以有一个. env 文件，它拾取 PUBLIC _ URL

Although you should remember that what its used for -

您可以使用此变量强制逐字引用资产 提供的 url (包括主机名) 在使用 CDN 托管应用程序时非常有用。

小开

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

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

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

小开

由于 记录在案 create-response-app 只会导入从 REACT_APP_开始的环境变量，因此我相信，如@redbmk 所述，PUBLIC_URL来自 package.json文件中的 homepage设置。

小开

像我这样的人在构建中寻找类似的东西:

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

然后在 package.json中将 https://dsomething.cloudfront.net设置为 homepage将不起作用。

1. Quick Solution

像这样构建你的项目:
(窗户)

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

(linux/mac)

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

你会得到

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

在您构建的 index.html 中

2. 永久性和推荐的解决方案

在项目根目录(package.json 所在的位置)创建一个名为 .env的文件。
在这个文件中写下下面的内容(不要在 url 周围加引号) :

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. Weird Solution (Will do not work in latest react-scripts version)

把这个加到你的包里 json
「主页」 : 「 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 问题 Github 评论

小开

当您尝试在 github 页面中托管一个 response 应用程序时，这个问题变得很明显。

我是怎么解决的,

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

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

这就是我需要做的。

See working example hosted on GitHub pages at

Https://sean-bradley.github.io/seans-typescript-reactjs-redux-boilerplate/

小开

If you see there source code they check if process.env.NODE_ENV === 'development' returns true, and they automatically removes host URL and only return path.

例如，如果您设置如下

PUBLIC_URL=http://example.com/static/

他们将删除 http://example.com和只返回 /static。

但是，由于您只设置了像 http://example.com这样的根 URL，它们只会返回一个空字符串，因为您的 URL 字符串中没有子路径。

只有在调用 react-scripts start时才会发生这种情况，如果调用 react-scripts build，那么 isEnvDevelopment将是 false，因此它将返回 http://example.com，就像您在 .env文件中设置的那样。

这是 GetPublicUrlOrPath.js的源代码。

/**
* Returns a URL or a path with slash at the end
* In production can be URL, abolute path, relative path
* In development always will be an absolute path
* In development can use `path` module functions for operations
*
* @param {boolean} isEnvDevelopment
* @param {(string|undefined)} homepage a valid url or pathname
* @param {(string|undefined)} envPublicUrl a valid url or pathname
* @returns {string}
*/
function getPublicUrlOrPath(isEnvDevelopment, homepage, envPublicUrl) {
const stubDomain = 'https://create-react-app.dev';


if (envPublicUrl) {
// ensure last slash exists
envPublicUrl = envPublicUrl.endsWith('/')
? envPublicUrl
: envPublicUrl + '/';


// validate if `envPublicUrl` is a URL or path like
// `stubDomain` is ignored if `envPublicUrl` contains a domain
const validPublicUrl = new URL(envPublicUrl, stubDomain);


return isEnvDevelopment
? envPublicUrl.startsWith('.')
? '/'
: validPublicUrl.pathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
envPublicUrl;
}


if (homepage) {
// strip last slash if exists
homepage = homepage.endsWith('/') ? homepage : homepage + '/';


// validate if `homepage` is a URL or path like and use just pathname
const validHomepagePathname = new URL(homepage, stubDomain).pathname;
return isEnvDevelopment
? homepage.startsWith('.')
? '/'
: validHomepagePathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
homepage.startsWith('.')
? homepage
: validHomepagePathname;
}


return '/';
}
小开

这个解决方案在 Linux bash 命令行上运行:

  1. 转到您的 response 项目根目录。
  2. 打开该目录上的 bash 终端。
  3. 运行两个命令之后，您将看到 PUBLIC_URL发生了变化:
> export PUBLIC_URL=https://example.com
> npm run build
小开

如果 PUBLIC_URL环境变量没有效果，可能是由于 这个问题的原因，导致在开发过程中忽略了 PUBLIC_URL。它是固定在创建反应应用程序版本 3.4.0。

小开

如果您的应用程序有路由，请尝试如下

  1. 在 package.json 所在的项目根目录下创建一个名为. env 的文件，然后像下面这样添加生产 URL

    PUBLIC_URL=https://something.com

  2. 在路由配置中将 名字添加到 浏览器路由器(在 App.js/App.jsx 中)

    <BrowserRouter basename="https://something.com">
小开

首先反应编译的代码是“纯 Java 脚本”。因此，在 html 页面中，可以使用以下代码引用该代码:

< script src="my_compiled_component.js" >< /script >

反应组件的创建不能依赖于主要网站的超链接。从反应代码，定位您的组件正在运行的网站使用这样的东西:

window.location.protocol + '//'+ window.location.hostname + ':' + window.location.port

遵循这种模式，重要的是要理解有些文件夹可能需要修改权限，以便每个人都可以通过 html 调用找到您的组件。 如何定义将编译的反应代码放置在何处？这可以通过手动或使用诸如 webpack 之类的工具来完成，这些工具允许您设置此输出。


提交答案