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 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
js实现查询商品案例
Jul 22 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
linux下 C语言对 php 扩展
2008/12/14 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python字符串连接的N种方式总结
2014/09/17 Python
Python入门篇之字典
2014/10/17 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Unicode和Python的中文处理
2017/03/19 Python
简单实现python数独游戏
2018/03/30 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
internal修饰符起什么作用
2013/12/16 面试题
2014年党员自我评议总结
2014/09/23 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
委托证明范本
2014/11/25 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python