React 項目在 Localhost 和 gh-pages 環境中看起來不同

Question

React 初學者在這里嘗試制作投資組合。 我遇到了一個問題，我找不到任何答案，因此在這里發布。

我的項目使用 react-mdl，尤其是項目頁面，它使用<Grid/>組件。 當我在移動界面中查看我的項目時（在 FireFox 和 Chrome 開發工具以及移動設備（OnePlus 7 Pro）上測試），我得到了我想要的布局。 但是，當我將相同的代碼推送到 Github Pages 時，布局明顯不同，而且肯定不吸引眼球。

以下屏幕截圖應該更好地解釋它

本地主機視圖

Github 頁面查看

我不一定確定究竟是什么導致了這個問題，並且已經嘗試了多個“修復”，不幸的是到目前為止還沒有解決，並且非常感謝朝着正確的方向推動。

我也為鏈接代碼而不是直接發布它而道歉，但是，由於文件相對較大，我不希望用那么多媒體把帖子弄得亂七八糟。

提前感謝您，如果我能提供更多信息，請告訴我，我將非常高興。

Answer 1

您的存儲庫中的公用文件夾看起來在上個月沒有更改。 如果您在將項目部署到 gh-pages 之前沒有構建項目，那么您的實時網站將使用可能存在這些格式問題的舊版本。

使用 npm 運行 build，然后 npm 運行 deploy。 這將使用您所做的最新更改更新您的公用文件夾，然后部署這些較新的更改。

您可以在此處閱讀有關 CRA 公用文件夾的更多信息 - https://create-react-app.dev/docs/using-the-public-folder/