反应构建后的包发布摘要

1，部署在apache web服务器上(wamp | xammp)

1.需要跨域设置后台界面

(1)在服务器上使用访问控制允许源响应头。

设置访问控制允许来源：*允许所有域名的脚本访问此资源。

如果考虑安全问题，还可以设置访问控制允许来源：www.build.im以允许访问特定域名

(2)服务器充当反向代理

2.打包文件并将其放在单独的服务器上

(1)打包react项目构建并将构建中的文件复制到web服务器的根目录

(2)同时需要在web根目录下放置一个. htaccess文件，文件内容为：(服务器找不到路由时，路由自动返回index.html，由react-router接管)

备注：

前端本地开发会出现跨域问题。如果项目是CREAT-REAT-APPCLI创建的，可以直接将api地址目录添加到package.json文件中：‘proxy’:“www . API.com :8000”来解决跨域问题。如果是自己创建的项目，

代理中间件也可以实现代理。local effech(' API/user info '，function(){ })；请求将发送到http://www . online.com :80/API/user info接口

proxy : { '/API)' : { target : ' http://www . online.com :80/'，changeOrigin: true }，} if module mod _ rewrite . c Options follow symlinks rewrite engine On rewrite cond % { REQUEST _ FILENAME }！-d Rewrite cond % { REQUEST _ FILENAME }！-f重写器(。*)$ index.html[qsa，pt，l]/ifmodule 2，部署在nginx web服务器上

Try_files指令：配置nginx/nginx.conf文件

服务器{.location/{ try _ files $ uri/index . html } } ReactBuild后包中的文件可以直接放在nginx下的web目录中，通过ip访问

遇到的坑

1.安装和使用

Npm安装-g创建-反应-app2，生成新项目

Create-react-app my-app(最好不要用驼峰样式命名生成的项目，否则以后会提示您更改生成的文件)

3.输入项目目录并预览它

Cd my-appnpm start接下来可以在你的浏览器中看到效果

create-react-app支架生成的目录很简单，没有冗余文件。

不过打包的时候出了点小问题。npm运行build后，项目将生成一个build文件，但是当我单击index.html文件打开它时，浏览器是一个空白页，这是一个错误：

解决方法：在package.json配置文件中增加一句话：“首页‘:’。”,

这是构建后的路径问题。更改为相对路径后，您可以再次打开此index.html文件并正常浏览。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。