使用环境变量设置 base href

IT技术 reactjs deployment create-react-app react-router-v4
2021-05-03 13:45:22

需要<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

索引.html：

....

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

....

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

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

尝试的事情：

索引.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 属性也不能解决问题

2个回答

这个问题解决了。跟着这些步骤：

  1. 在 package.json 中设置homepagekey 为""
  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

你可以做：

    <base href="%PUBLIC_URL%/"> <!-- Note the slash at the end -->
  • PUBLIC_URL是一个可通过process.env.
  • 您可以PUBLIC_URL在您的终端export PUBLIC_URL=/subdir或您的终端上设置env 变量.env（检查其上的 create-react-app，它在后台使用 dotenv）。
  • 您还可以设置homepage在package.json到 /subdir，它也会起作用。
  • PUBLIC_URL，如果未设置，则取主页值。

如果您只需要在 index.html 中添加链接前缀，那么您就不需要基本标签。 base 标签对于图像链接很有用，例如，在你的组件中：

如果您在其中提供应用程序，则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 属性值开始。

如果你有background-image在SCSS（SASS）的文件，我建议将其移动到HTML，这样的：

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

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

其它你可能感兴趣的问题
上一篇如何设置 Marlin 使用加热室？ 下一篇更改 Marlin 中的热端热敏电阻输入