如何运行 create-react-app 构建版本

Posted 2023-02-21

【中文标题】如何运行 create-react-app 构建版本

【英文标题】：How to run create-react-app build version

【发布时间】：2018-09-21 22:12:03

【问题描述】：

我创建了一个测试 React 应用程序并使用 create-react-app 启动它。我从 yarn start 开始，但这会启动应用程序的调试版本。我做了 npm run build 并创建了 build 文件夹，但是当我从 /build 文件夹执行 yarn start 时，它仍然启动调试应用程序的版本。我需要这个来测试优化版本的性能。我该如何解决这个问题？

【问题讨论】：

我提出的答案好运吗？

我已经更新了我的答案，其中包含使用 apache、nginx 和 express 在本地运行生产构建的资源。

【参考方案1】：

您实际上可以使用静态服务器来运行您的应用的构建版本。 serve 是可行的。您可以使用以下方法对其进行测试：

npm run build

npx serve -s build

【讨论】：

正是我想要的

这行得通，现在要弄清楚我的网站上没有出现什么以及为什么

【参考方案2】：

首先在您的应用目录中导航。

根据create-react-app官方网站。当您运行 npm run build 或 yarn build 时，您会创建一个 build 目录，其中包含您应用的生产版本。

运行上述命令后，您可以检查应用的构建版本的下一件事是安装 serve 以默认在端口 5000 上为您的静态站点提供服务。

npm install -g serve
serve -s build

这会将链接复制到剪贴板，您可以将其粘贴到浏览器中并查看应用的构建版本。

【参考方案3】：

您正在尝试使用 create-react-app 从开发构建转移到生产构建，您需要使用 Web 服务器部署它，我建议使用 Heroku 或 droplet 或者您可以使用 @ 987654323@ 有一个使用以下命令的简单设置过程：

cd project-name
npm run build

npm install netlify-cli -g
netlify deploy

按照命令行提示，为新项目和 ./build 选择是 作为您的部署文件夹，瞧，您有一个生产 React 应用程序！

您可以使用apache、nginx、express 在本地托管应用程序

【讨论】：

不部署就不能在本地运行吗？

是的，如果您在本地运行 Web 服务器。

@gfels 这回答了你的问题吗？

【参考方案4】：

如果您想在浏览器中运行您的应用，并使用从文件系统本地提供的构建文件（即，没有网络服务器），您可以将其放入您的package.json：

"homepage": ".",

现在

使用npm run build 构建您的应用。 在浏览器中启动<your app>/build/index.html。

注意：如果您的应用（或某些路由库）使用 html5 pushState history API，则不建议使用此解决方案。 https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing