使用环境变量设置基本 href

Question

需要根据构建环境配置为 <base href=""/> 标签设置 href 值。

例如：

分期应该有 <base href="/staging" />

Prod 应该有 <base href="/" />

当前设置：

构建命令：

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html:

....

<base href="" + process.env.REACT_APP_API_URL />

....

这在 index.html 中似乎不起作用。虽然类似的设置适用于 JS 文件

（可能是因为 JS 文件被解析并打包成一个文件，打包器在那个时间点读取值）

尝试过的事情：

index.html:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" />（类似于PUBLIC_URL变量）

设置基本名称属性以及浏览器路由器也不能解决问题

Answer 1

这个问题已经解决了。请按照以下步骤操作：

在package.json中设置homepage键为""
在.env.staging文件中设置PUBLIC_URL=/survey
不需要使用<base href>。可以从 HTML 文件中删除
将样式表的链接更改为

<link rel="stylesheet" href="%PUBLIC_URL%/vendor/bootstrap/css/bootstrap.min.css">

无需添加process.env

Answer 2

你可以这样做：

    <base href="%PUBLIC_URL%/"> <!-- Note the slash at the end -->

PUBLIC_URL 是一个可通过 process.env 访问的环境变量。
您可以在终端 export PUBLIC_URL=/subdir 或 .env 上设置 PUBLIC_URL env 变量（检查上面的 create-react-app，它在后台使用 dotenv）。
你也可以把package.json里面的homepage设置成/subdir，也可以。
PUBLIC_URL，如果没有设置，则取首页值。

如果只需要在index.html里面加前缀link，那么就不需要base标签了。 base 标签对图像很有用 link 例如，它们在你的组件中：

如果您在 domain.com/ 中提供您的应用程序，您可以：

<img src="/assets/duck.jpg" />

相反，如果您在 domain.com/subdir/ 中提供您的应用程序，您可以：

<img src="/subdir/assets/duck.jpg" />

或者如果你像上面那样设置了基本标签：

<img src="assets/duck.jpg" /> <!-- Base tag only work with relative paths, same as ./assets/duck.jpg -->

请注意，以上内容：src="assets/duck.jpg" 也适用于您的首页 (/subdir) 无基本标签！图片的路径是相对于你当前所在的路径。这意味着，在 /subdir/some-route 上，Web 浏览器将在服务器上的 /subdir/some-route/assets/duck.jpg 处进行搜索，没有基本标记。有了base标签，你可以导航到任意路由，每个图片src路径都会忽略你当前所在的路径，从base标签的href prop值开始。

如果您在 scss (sass) 文件 中有 background-image，我建议将它移动到 html，像这样：

<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
 ...

Sass 对我来说，不是用上面的相对路径编译的。此外，您可以尝试创建资产文件夹 ../../public/assets/background-form.jpg 的相对路径，但由于特殊限制 ModuleScopePlugin 禁止您 link 在 src 之外的相对路径，它会失败文件夹（参见）。

使用环境变量设置基本 href

Setting base href using Environment variables

deployment

reactjs

create-react-app

react-router-v4