使用环境变量设置基础 href

Question

使用环境变量设置基础 href

reactjsdeploymentcreate-react-appreact-router-v4

12

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

例如：

Staging 环境应该有 <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变量）

同时设置basename属性和Browser Router也不能解决问题

- Manmeet S. Oberoi

看一下webpack.DefinePlugin：https://dev59.com/questions/Wl0a5IYBdhLWcg3wt6mK#30061249 - quotesBro

谢谢，但是没有解决问题。进程变量正在JS中解析，但在index.html中没有被解析。 - Manmeet S. Oberoi

我会选择 https://dev59.com/xFsW5IYBdhLWcg3wQVRC#35269814 - Peter

2个回答

2

你可以做：

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

PUBLIC_URL 是一个通过 process.env 可以访问的环境变量。
您可以在终端上设置 PUBLIC_URL 环境变量，例如：export PUBLIC_URL=/subdir，或者在您的 .env 文件中设置（请查看 create-react-app 文档，它使用 dotenv 库来实现）。
您也可以在 package.json 中设置 homepage 为 /subdir，这也是可行的。
如果没有设置 PUBLIC_URL，则会采用 homepage 的值。

如果您只需要在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上，Web浏览器将在服务器上搜索/subdir/some-route/assets/duck.jpg，而不带有基础标记。使用基础标记，您可以导航到任何路由，并且每个图像src路径都将忽略您当前所在的路径，并从基础标记href属性值开始。

如果你在scss（sass）文件中有background-image，我建议将其移动到html中，像这样：

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

对我来说，Sass 在使用相对路径时无法编译。此外，您可以尝试使用相对路径到 assets 文件夹 ../../public/assets/background-form.jpg，但由于特殊限制 ModuleScopePlugin 禁止您链接 src 文件夹之外的相对路径（请参见这里），因此它将失败。

- Ambroise Rabier

我只需要在URL中添加前缀，无论何时使用%PUBLIC_URL%，我不想添加env.PUBLIC_URL或在package.json中添加homepage属性。我该怎么做？如果我创建env变量，它会在另一个子文件夹下创建构建。你能帮我吗？谢谢。 - Vishal Chhodwani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manmeet S. Oberoi · Accepted Answer

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

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

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

不需要添加 process.env。