react白螢幕的原因是HtmlWebpackPlugin插件在引入bundle.js時,引入的是相對路徑,其解決方案:1、在output配置中加入publicPath;2、在history模式下,將historyApiFallback設定為true即可。
本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react白螢幕原因是什麼?
react history模式下的白屏問題
#近期,再用react的時候,由於不想用醜陋的hash,便將路由模式切換成history了,結果帶來了一些問題,例如刷新白屏,還有圖片載入不出來,這裡我們說一下解決方案。
原因
首先,我們先來談談造成這一系列現象的原因。
我們在http://localhost:xxxx/這個路徑下去刷新頁面是沒有問題的,一切都顯得那麼正常,但是當我們換到一個子模組,刷新就會白屏,為什麼呢?
我們看到,它會從目前路徑下去找bundle.js,為什麼?因為HtmlWebpackPlugin插件在幫我們引入bundle.js時,引入的是相對路徑
所以,在刷新時,它是相對於現在的url取尋找的。
解決方案
原因一旦清楚,解決方案就呼之欲出了。我們只要想辦法讓bundle.js的載入路徑在刷新的時候,也從根目錄開始尋找,而不是跟隨當前url。
1.output設定加入publicPath
output: { filename: 'assets/js/bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: "/" }
publicPath是什麼意思呢?官網中有這麼一句話
webpack-dev-server 也會預設從 publicPath 為基準,使用它來決定在哪個目錄下啟用服務,來存取 webpack 輸出的檔案。
簡單理解,你的靜態資源,都會從此路徑下開始載入
publicPath: "/" //載入路徑'/assets/js/bundle.js'
這樣,每次刷新都會從根目錄開始加載,就不會丟失我們的bundle.js了。圖片載入不出來也是這個問題。
2.webpack-dev-server的historyApiFallback
history模式下,devServer需要配置historyApiFallback為true
devServer: { historyApiFallback: true }
注意以上兩點,history模式就能正常使用了。如果還有其他原因,歡迎大家補充。
ps:專案部署上伺服器後,頁面白屏,需要後台進行相關設置,這裡不做討論。
推薦學習:《react影片教學》
以上是react白屏原因是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!