修复 Create-React-App 显示 README.md 的问题

2020-09-23 08:00:00 · 飞浪

介绍您终于完成了React应用并将其推送到GitHubPages进行部署，但在检查实时项目时，您发现您的应用仅呈现了README.md文件，而不是您出色的应用。现在该怎么办？本指南将

介绍

您终于完成了 React 应用并将其推送到 GitHub Pages 进行部署，但在检查实时项目时，您发现您的应用仅呈现了 README.md 文件，而不是您出色的应用。现在该怎么办？

本指南将演示最简单的解决方案。喝杯咖啡，坐下来学习如何解决这个问题。

为什么要渲染 README.md

您之所以看到 README.md 文件而不是应用程序被渲染，是因为您尚未生成应用程序在浏览器中运行所需的浏览器友好型静态资产（HTML、CSS 和 JavaScript）。幸运的是，Create-React-App 提供了一个内置解决方案，可帮助您使用一个命令捆绑资产。这样做会生成与您的浏览器兼容的可用于生产的捆绑包。

构建您的应用程序

现在您了解了此问题的原因，您可以轻松修复它。首先，确保您的存储库已激活 GitHub Pages。现在将以下行添加到您的 package.json 文件中。

      "homepage" : "https://{your_github_username}.github.io/{app-name}"

#{your_github_username} - Your GitHub username
# {app-name} - Name of your application
    

现在运行下面的命令来生成用于生产的优化包。

      yarn run build

		OR

npm run build

在项目根目录中，请注意 Create-React-App 会生成一个名为build的新文件夹。此文件夹包含应用程序的浏览器友好版本。继续浏览该文件夹以获得更好的理解。

部署

您终于生成了您的应用程序，但它尚未部署。还记得Create-React-App 生成的build文件夹吗？该文件夹就是您的存储库中所需要的。借助 GitHub Pages 包，您可以轻松部署 build 文件夹，不会遇到任何麻烦。在您的终端中运行以下命令来安装该包。

      yarn add gh-pages

	OR

npm install --save gh-pages

一旦 GitHub Pages 软件包成功安装完成，你的生产版本必须推送到你的存储库。要轻松完成此操作，请在终端中运行以下命令。

      gh-pages -b master -d build

# -b : Branch
# -d : Directory
    

瞧！您的应用应该可以通过您在 package.json 文件中作为 homepage 属性值提供的 URL 启动并运行，即 https://{your_github_username}.github.io/{app-name}。继续在浏览器中检查一下。

结论

就这样！您已成功修复该问题。如果您想了解如何使用 GitHub Pages 部署 Create-React-App，请阅读我之前的指南：如何在 GitHub Pages 上部署 React 。如果您还需要回答更多问题，我很乐意在 Twitter @DesmondNyamador上回答。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文