react build 后打包发布总结

React构建后打包发布指南：一步步与实际操作体验

一、Apache Web服务器上的部署（WAMP | XAMPP）

在将React应用部署到Apache Web服务器上时，我们需要注意以下几个步骤。

后台接口需要进行跨域设置。这可以通过服务端利用Aess-Control-Allow-Origin响应头来解决。设置此响应头允许所有域名的脚本访问该资源。出于安全考虑，你也可以设置只允许特定域名访问。另一种方式是服务器做反向代理。

打包文件需要单独放置在一个服务器上。你需要将React项目build后的文件复制到Web服务器的根目录。你需要在Web根目录放置一个.htaess文件，当服务器出现找不到路由时，它会自动回到index.html，路由由react-router接管。

在本地开发前端时可能会遇到跨域问题。如果你使用的是creat-react-app cli创建的项目，你可以在package.json文件中添加api地址目录来解决这个问题。例如，配置proxy middleware也可以实现代理。

二、Nginx Web服务器上的部署

部署到Nginx Web服务器相对简单。你只需要指令配置nginx/nginx.conf文件，然后将React build后的文件包里的文件直接放到nginx下的web目录，通过ip访问即可。

三、遇到的坑与解决办法

在打包发布React应用时，你可能会遇到一些问题。例如，安装使用create-react-app时，你需要使用npm install -g create-react-app指令来安装。生成新项目时，使用create-react-app my-app（生成的项目最好不要用驼峰式命名）。进入项目目录并预览时，如果遇到空白页面问题，你可以在package.json配置文件中添加"homepage": "."来解决路径问题。

React应用的打包发布并不复杂，只需要按照步骤操作并注意一些细节问题，就可以成功部署你的React应用到服务器上。希望这篇文章能对你的学习有所帮助，也希望大家多多支持我们的推广。

（以上内容仅为分享和学习交流之用，如有错误或需要改进的地方，欢迎指正和补充。）