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