使用环境变量设置基本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 中将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