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

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

在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访问的env变量。
您可以在终端机PUBLIC_URL或export PUBLIC_URL=/subdir上设置.env env变量（检查其上的create-react-app，它在后台使用dotenv）。
您还可以将homepage中的package.json设置为/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道具值开始。

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

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

对我而言，Sass没有使用上面的相对路径进行编译。另外，您可以尝试建立到资产文件夹../../public/assets/background-form.jpg的相对路径，但是由于特殊限制ModuleScopePlugin的限制，该限制会禁止您将相对路径链接到src文件夹之外（请参阅{ {3}}。

使用环境变量设置基本href

2 个答案: