React項(xiàng)目build打包頁(yè)面空白的解決方案
問(wèn)題描述
React項(xiàng)目執(zhí)行 build 命令后，在本地服務(wù)器打開頁(yè)面 是空白的，而且控制臺(tái)報(bào)錯(cuò)
如下圖所示
解決方法
打開根目錄下的 package.json 文件，添加如下代碼
{
"name": "testproject",
"version": "0.1.0",
"homepage": "./", // 加上這行代碼，然后重新 build 即可
"private": true,
"dependencies": {
"@ant-design/icons": "^5.2.5",
...
}
...
}重新 build 之后，啟用本地服務(wù) 打開 index.html 文件（本文中用 Live Server 插件啟用本地服務(wù)，你也可以用其它的），如下圖所示
打開后，頁(yè)面可正常訪問(wèn)，如下圖所示
注意：頁(yè)面雖然可以正常訪問(wèn)，但如果在地址欄 直接輸入U(xiǎn)RL 回車，就會(huì)變成404頁(yè)面的。這種情況沒關(guān)系，當(dāng)你最后把項(xiàng)目 部署到正式服務(wù)器上時(shí)，在nginx中配置以下代碼即可。
location / {
try_files $uri /index.html;
}到此這篇關(guān)于React項(xiàng)目build打包頁(yè)面空白的解決方案的文章就介紹到這了,更多相關(guān)React build打包頁(yè)面空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react 實(shí)現(xiàn)頁(yè)面代碼分割、按需加載的方法
本篇文章主要介紹了react 實(shí)現(xiàn)頁(yè)面代碼分割、按需加載的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
詳解create-react-app 自定義 eslint 配置
這篇文章主要介紹了詳解create-react-app 自定義 eslint 配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)
本文主要介紹了React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
這篇文章主要介紹了redux副作用處理之redux-thunk使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Ant Design中使用css切換的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法
本文主要介紹了React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法
這篇文章主要介紹了React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React中使用async validator進(jìn)行表單驗(yàn)證的實(shí)例代碼
react上進(jìn)行表單驗(yàn)證是很繁瑣的，在這里使用async-validator處理起來(lái)就變的很方便了，接下來(lái)通過(guò)本文給大家介紹React中使用async validator進(jìn)行表單驗(yàn)證的方法,需要的朋友可以參考下2018-08-08
本篇文章主要介紹了一個(gè)基于react的圖片裁剪組件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04