React項(xiàng)目build打包頁面空白的解決方案
更新時(shí)間：2023年08月23日 15:37:07 作者：愛上你...家菜包
React項(xiàng)目執(zhí)行build命令后,在本地服務(wù)器打開頁面是空白的,本文主要介紹了React項(xiàng)目build打包頁面空白的解決方案,感興趣的可以了解一下
問題描述
React項(xiàng)目執(zhí)行 build 命令后，在本地服務(wù)器打開頁面 是空白的，而且控制臺(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ù)，你也可以用其它的），如下圖所示
打開后，頁面可正常訪問，如下圖所示
注意：頁面雖然可以正常訪問，但如果在地址欄 直接輸入U(xiǎn)RL 回車，就會(huì)變成404頁面的。這種情況沒關(guān)系，當(dāng)你最后把項(xiàng)目 部署到正式服務(wù)器上時(shí)，在nginx中配置以下代碼即可。
location / {
try_files $uri /index.html;
}到此這篇關(guān)于React項(xiàng)目build打包頁面空白的解決方案的文章就介紹到這了,更多相關(guān)React build打包頁面空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決antd的Table組件使用rowSelection屬性實(shí)現(xiàn)多選時(shí)遇到的bug
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實(shí)現(xiàn)多選時(shí)遇到的bug問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
React服務(wù)端渲染(SSR)的實(shí)現(xiàn)方式和最佳實(shí)踐
服務(wù)端渲染(SSR)是現(xiàn)代React應(yīng)用開發(fā)中的重要技術(shù),它能顯著提升應(yīng)用的性能、SEO和用戶體驗(yàn),本文將深入探討React SSR的原理、實(shí)現(xiàn)方式和最佳實(shí)踐,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了淺談對(duì)于react-thunk中間件的簡單理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
React中useState值為對(duì)象時(shí)改變值不渲染問題
這篇文章主要介紹了React中useState值為對(duì)象時(shí)改變值不渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
React將組件（component）看成一個(gè)狀態(tài)機(jī)（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實(shí)現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-11-11
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-12-12
本文詳細(xì)介紹了React中的雙緩存Fiber樹機(jī)制,包括概念、核心流程、優(yōu)勢以及面試中的常見問題和標(biāo)準(zhǔn)回答,通過"通俗+專業(yè)"的方式,幫助面試者全面理解React的性能優(yōu)化體系,掌握雙緩存Fiber樹的關(guān)鍵點(diǎn),感興趣的朋友跟隨小編一起看看吧2026-03-03
教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境，旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法，感興趣的朋友跟隨小編一起看看吧2021-07-07
React中useCallback useMemo使用方法快速精通
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2023-02-02
state 中可以保存任意類型的JavaScript值，包括對(duì)象，但是，不應(yīng)該直接修改存放在 React state 中的對(duì)象，這篇文章主要介紹了React?18更新state中的對(duì)象,需要的朋友可以參考下2023-08-08