react build 路徑不對怎麼辦

react build路徑不對的解決方法：1、找到「node_modules -> react-scripts -> config -> paths.js」；2、修改內容為「envPublicUrl || (publicUrl ? url .parse(publicUrl).pathname : './');」；3、重新編譯打包即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react build 路徑不對怎麼辦？

React專案build之後資源檔案路徑不正確或開啟空白頁的問題及簡易解決方法

找到node_modules -> react-scripts -> config -> paths .js

修改

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'./'
  return ensureSlash(servedUrl, true);
}

為

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
  return ensureSlash(servedUrl, true);
}

再重新編譯打包即可

或更簡單的方法是在你的package.json：加入下面這句

“homepage”: “.”,

這將確保所有資產路徑都相對於index.html

這樣應用程式從中移動http://mywebsite.com到http://mywebsite.com/relativepath甚至http://mywebsite.com/relative/path無需重建。

如果您沒有使用HTML5 pushState歷史記錄API或根本不使用客戶端路由，則無需指定應用程式的URL。

如果還是資源路徑不對，可能recat框架用了BrowserRouter路由會導致瀏覽器存取不到對應的路由配置，這個路由有點小問題，可以更換HashRouter即可解決空白或資源路徑錯誤問題.

推薦學習：《react影片教學》

以上是react build 路徑不對怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！