reactbuild后打包发布总结
⼀，部署在apache  web服务器上（wamp  |  xammp）
1.后台接⼝需要做跨域设置
（1）在服务端利⽤Access-Control-Allow-Origin响应头解决。
设置Access-Control-Allow-Origin：*，允许所有域名的脚本访问该资源。
如果考虑到安全问题，也可以设置Access-Control-Allow-Origin：www.build.im  允许特定域名访问
（2）服务器做反向代理
2.打包⽂件单独放置⼀个服务器
（1）把react  项⽬  build 打包后复制build  ⾥⾯的⽂件到web服务器的根⽬录
( 2 ) 同时需要在web根⽬录放置.htaccess⽂件，⽂件内容为：（当服务器出现不到路由时⾃动回到index.html  路由由react-router 接管）
附备注：
前端本地开发时会存在跨域问题，如果项⽬是⽤creat-react-app cli  创建的，则直接在package.json  ⽂件⾥添加  api 地址⽬录即可："proxy"： “www.api:8000” 即可解决跨域问题，如果是⾃⼰创建的项⽬
proxy: {
'/api)': {
target: 'line:80/',
changeOrigin: true
},
}
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [QSA,PT,L]
</IfModule>
⼆，部署在nginx  web 服务器上
指令：配置 f ⽂件
server {
...
location / {
try_files $uri /index.html
}
}
react  build  后的⽂件包⾥的⽂件直接放到  nginx 下的web  ⽬录即可通过ip  访问
遇到的坑
1、安装使⽤
npm install -g create-react-app
react router 配置2、⽣成新项⽬
create-react-app my-app
(⽣成的项⽬最好不要⽤驼峰式命名，否则后⾯⽣成⽂件提⽰也会让你改)
３、进⼊项⽬⽬录并预览
cd my-app
npm start
接下来就可以在你的浏览器中看到效果
⽤create-react-app脚⼿架⽣成的⽬录简单，没有多余的⽂件。
但是在打包的时候遇到⼀点⼩问题，npm run build后该项⽬会⽣成⼀个build⽂件，但是我点击其中的index.html⽂件打开后浏览器是空⽩页⾯，这是报的错：
解决办法：在package.json配置⽂件中加⼀句："homepage": ".",
这是build之后的路径问题，改为相对路径后再次打开这个index.html⽂件就可以正常浏览了。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。