如何在 create-react-app 中设置 PUBLIC_URL？

Question

我使用 cross-env 以便我像下面那样设置 PUBLIC_URL。

"start": "cross-env NODE_ENV=dev PUBLIC_URL=http://localhost:8080 react-app-rewired start --scripts-version react-scripts-ts"

然后 console.log(process.env) 向我展示关于 NODE_ENV, dev 的正确结果。但 PUBLIC_URL 只是 ' ' 那个默认值。

如何设置 PUBLIC_URL？我需要两个 PUBLIC_URL 用于开发和生产环境。

Answer 1

以下是我对这个问题的经验：

create-react-app 或 CRA 系统设置

%PUBLIC_URL%

来自应用程序文件夹根目录中.env文件的变量，文件旁边package.json。无需PUBLIC_URL在开发配置中使用，根据我的经验，该应用程序在开发设置中运行得很好。跑步

yarn build

在 CRA 初始化的 React 应用程序上将PUBLIC_URL根据.env文件内容设置变量。那么.env文件应该包含什么？

不需要括号或大括号，只需

.env 文件内容：

PUBLIC_URL=https://yourdomain.whatever/subdirectory

例如，如果您的应用程序是从/public_html/subdirectory.

此外，CRA 不支持homepage其package.json文件中的关键字，因此可以将其删除并使用.env根目录中的文件代替。

CRA 文档特别指出要在 package.json 中设置主页，以便在 github 页面上部署，因此您关于 homepage 关键字使用的声明不正确。 (5认同)

Answer 2

Start 在开发配置中加载 webpack.config，它会忽略PUBLIC_URL. 它启动一个开发服务器，为主机根目录下的文件提供服务。如果您需要更改开发服务器的端口，请改用PORT。

（原答案已修复，见评论）

在开发中（localhost），PUBLIC_URL被忽略，请参阅https://create-react-app.dev/docs/advanced-configuration/。另外，您似乎将 PUBLIC_URL 与“package.json”中的主页混淆了。 (3认同)
@AmbroiseRabier：现在看来它也在 DEV 上使用（记录在该文档页面中）。我刚刚测试过并且有效。这是有道理的，它在 DEV 中也可能有用。 (3认同)