使用环境变量设置基本href

Question

需要基于构建环境配置为<base href=""/>标记设置href值。

例如：

分期应具有<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访问的env变量。
• 您可以在终端export PUBLIC_URL=/subdir或.env上设置PUBLIC_URL env变量（检查其上的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上搜索Web浏览器，而没有基本标签。 使用基本标签，您可以导航到任何路线，并且每个图片src路径都将忽略您当前所在的路径，并从基本标签href prop值开始。

---

如果您在scss（sass）文件中有background-image ，我建议将其移动到html，如下所示：

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

Sass对我而言，没有使用上面的相对路径进行编译。 另外，您可以尝试创建资产文件夹../../public/assets/background-form.jpg的相对路径，但是由于特殊限制ModuleScopePlugin限制，该路径会失败，该限制禁止您在src文件夹外部链接相对路径（看到这里 ）。