使用環境變量設置基本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文件夾外部鏈接相對路徑（看到這里 ）。