react build 后打包发布总结


Posted in Javascript onAugust 24, 2018

一,部署在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.com:8000” 即可解决跨域问题,如果是自己创建的项目

配置好proxy  middlle 中间件 也可以实现代理。本地fecth( ''api/userinfo", fucntion(){} ); 请求会发送到    http://www.online.com:80/api/userinfo  接口上

proxy: {
  '/api)': {
   target: 'http://www.online.com: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 服务器上

try_files 指令:配置 nginx/nginx.conf 文件

server {
 ...
 location / {
  try_files $uri /index.html
 }
}

react  build  后的文件包里的文件直接放到  nginx 下的web  目录 即可通过ip  访问

遇到的坑

1、安装使用

npm install -g create-react-app

2、生成新项目

create-react-app my-app

(生成的项目最好不要用驼峰式命名,否则后面生成文件提示也会让你改)

3、进入项目目录并预览

cd my-app
npm start

接下来就可以在你的浏览器中看到效果

用create-react-app脚手架生成的目录简单,没有多余的文件。

但是在打包的时候遇到一点小问题,npm run build后该项目会生成一个build文件,但是我点击其中的index.html文件打开后浏览器是空白页面,这是报的错:

react build 后打包发布总结

解决办法:在package.json配置文件中加一句:"homepage": ".",

react build 后打包发布总结

这是build之后的路径问题,改为相对路径后再次打开这个index.html文件就可以正常浏览了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
Javascript动画效果(1)
Oct 11 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 #Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
微信小程序支付PHP代码
Aug 23 #Javascript
You might like
php echo 输出字符串函数详解
2010/05/13 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php生成验证码函数
2015/10/20 PHP
php利用header函数下载各种文件
2016/08/24 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jQuery知识点整理
2015/01/30 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
促销活动方案模板
2014/02/24 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
保护环境倡议书300字
2014/05/19 职场文书
校运动会广播稿300字
2014/10/07 职场文书
党员民主评议自我评价
2014/10/20 职场文书