在打包之前,在 package.json 中 private 下(位置任意)新增"homepage": "./"

這樣在你點選index.html時候路徑沒有問題不會報錯,但是頁面可能還是空白的

然後將專案中的引用路由時候的BrowserRouter改為HashRouter,所有用到的地方都要改

然後執行yarn build 或者 npm run build

再點開index.html就不會報錯

原因：

​ 你必須把build裡的檔案直接放到應用伺服器的根路徑下，比如，你的伺服器IP是172.16.38.253，應用伺服器埠為8080，你應該保證http://172.16.38.253:8080這種訪問方式，訪問到的是你的build下的檔案。如果你希望以http://172.16.38.253:8080/build/index.htm這種方式訪問應用，那麼你可以在package.json檔案中增加一個homepage欄位。

在伺服器下執行和直接開啟html檔案有什麼區別？

​ 最直接的區別，很容易注意到，一個是file協議，另一個是http協議。file協議更多的是將該請求視為一個本地資源訪問請求，和你使用資源管理器開啟是一樣的，是純粹的請求本地檔案。而http請求方式則是通過假架設一個web伺服器，解析http協議的請求然後向瀏覽器返回資源資訊。我們所開發的html檔案最後必定是會以網頁的形式部署在伺服器上，通過http協議訪問，所以我們開發中也儘可能模擬線上環境，架設本地伺服器，來避免file協議與http協議實現過程中的某些差異性，如某些API的差異、跨域請求的差異等。舉個最容易驗證的例子：在頁面引入一張絕對路徑的圖片，即'/image/example.png'，然後分別通過這兩種方式開啟頁面，file協議會將資源請求到根路徑，而http協議雖然也會請求到根路徑，但是是相對本地架設的伺服器的根路徑，一般也就是專案資料夾的路徑。

​ html是運行於客戶端的超文字語言，從安全性上來講，服務端不能對客戶端進行本地操作。即使有一些象cookie這類的本地操作，也是需要進行安全級別設定的。

轉自：[react專案打包後點擊index.html頁面出現空白](