react項目打包后點擊index.html頁面出現(xiàn)空白的問題

更新時間：2023年06月09日 08:34:05 作者：csdn_haow

這篇文章主要介紹了react項目打包后點擊index.html頁面出現(xiàn)空白的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react項目打包后點擊index.html頁面出現(xiàn)空白

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

這樣在你點擊index.html時候路徑?jīng)]有問題不會報錯,但是頁面可能還是空白的

然后將項目中的引用路由時候的BrowserRouter改為HashRouter,所有用到的地方都要改

然后執(zhí)行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文件有什么區(qū)別？

最直接的區(qū)別，很容易注意到，一個是file協(xié)議，另一個是http協(xié)議。

file協(xié)議更多的是將該請求視為一個本地資源訪問請求，和你使用資源管理器打開是一樣的，是純粹的請求本地文件。

而http請求方式則是通過假架設(shè)一個web服務器，解析http協(xié)議的請求然后向瀏覽器返回資源信息。

我們所開發(fā)的html文件最后必定是會以網(wǎng)頁的形式部署在服務器上，通過http協(xié)議訪問，所以我們開發(fā)中也盡可能模擬線上環(huán)境，架設(shè)本地服務器，來避免file協(xié)議與http協(xié)議實現(xiàn)過程中的某些差異性，如某些API的差異、跨域請求的差異等。

舉個最容易驗證的例子：

在頁面引入一張絕對路徑的圖片，即'/image/example.png'，然后分別通過這兩種方式打開頁面，file協(xié)議會將資源請求到根路徑，而http協(xié)議雖然也會請求到根路徑，但是是相對本地架設(shè)的服務器的根路徑，一般也就是項目文件夾的路徑。

html是運行于客戶端的超文本語言，從安全性上來講，服務端不能對客戶端進行本地操作。

即使有一些象cookie這類的本地操作，也是需要進行安全級別設(shè)置的。