使用环境变量设置基本 href

Question

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

例如：

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

产品应该有<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 变量）

设置 basename 属性和浏览器路由器也不能解决问题

Answer 1

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

1. 在package.json中设置homepage键为""
2. 在.env.staging 文件中设置PUBLIC_URL=/survey
3. 无需使用<base href>。可以从 HTML 文件中删除

4. 将样式表的链接更改为

   <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 环境变量（检查它的create-react-app，它在后台使用dotenv）。
• 也可以将package.json中的homepage设置为/subdir，也可以。
• PUBLIC_URL，如果未设置，则获取主页值。

---

如果只需要在 index.html 中添加链接前缀，则不需要基础标签。 例如，基本标记对于组件内部的图像链接很有用：

如果您在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 上，网络浏览器将在服务器上的/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 禁止您链接src 文件夹之外的相对路径（请参阅here），它会失败。