快捷導(dǎo)航

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

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

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

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

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

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

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

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

再點(diǎn)開index.html就不會(huì)報(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這種訪問(wèn)方式，訪問(wèn)到的是你的build下的文件。

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

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

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

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

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

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

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

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

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

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