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

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

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

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

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

這樣在你點(diǎn)擊index.html時(shí)候路徑?jīng)]有問題不會報(bào)錯(cuò),但是頁面可能還是空白的

然后將項(xiàng)目中的引用路由時(shí)候的BrowserRouter改為HashRouter,所有用到的地方都要改

然后執(zhí)行yarn build 或者 npm run build

再點(diǎn)開index.html就不會報(bào)錯(cuò)

原因：

你必須把build里的文件直接放到應(yīng)用服務(wù)器的根路徑下，比如，你的服務(wù)器IP是172.16.38.253，應(yīng)用服務(wù)器端口為8080，你應(yīng)該保證http://172.16.38.253:8080這種訪問方式，訪問到的是你的build下的文件。

如果你希望以http://172.16.38.253:8080/build/index.htm這種方式訪問應(yīng)用，那么你可以在package.json文件中增加一個(gè)homepage字段。

在服務(wù)器下運(yùn)行和直接打開html文件有什么區(qū)別？

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

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

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

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

舉個(gè)最容易驗(yàn)證的例子：

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

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

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