前端那些事儿 关注
手机版

React项目如何打包发布及遇到的坑

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

React项目如何打包发布及遇到的坑

cacao111 2018-07-11 09:19:12 浏览4432 评论0

摘要:  使用React开发有一段时间了,下面我就把自己一些心得体会分享给大家。我使用的是create-react-app脚手架生成的项目,这个脚手架一键生成react项目,非常方便,先简单记录一下这个新建项目的过程。

 使用React开发有一段时间了,下面我就把自己一些心得体会分享给大家。我使用的是create-react-app脚手架生成的项目,这个脚手架一键生成react项目,非常方便,先简单记录一下这个新建项目的过程。

一、打包

在项目路径下,敲npm run buil,就出现了build文件夹,同时终端显示这些文字:

30ec75e36bdb5f6c6551318213e7ede265ce2c2a

大致意思是:已经编译好啦。build生成的这些东西要放在服务器root下,可以在pakege.json里,根据绿字里的例子,再重写。也能让它充当静态的服务器,敲:npm install -g serve,在敲serve -s build,就可以了。

二、发布

1、你必须把build里的文件直接放到应用服务器的根路径下,比如,你的服务器IP是172.16.38.253,应用服务器端口为8080,你应该保证http://172.16.38.253:8080这种访问方式,访问到的是你的build下的文件。如果你希望以http://172.16.38.253:8080/build/index.htm这种方式访问应用,那么你可以在package.json文件中增加一个homepage字段,如下:

"homepage": ".",

如果是跟后端集成一块部署,可以参考我的这篇文章:

Spring Boot之如何配置静态资源的地址与访问路径

2、安装serve静态服务器:在你本地安装serve,然后用serve来托管你build后的资源,也就是把build后的文件部署到了serve里,然后你就可以通过localhost:port的方式访问了。

三、遇到的坑

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文件打开后浏览器是空白页面,这是报的错:

2f31ef5d34f39cf126521e1399e381b6b44f4ef4

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

29649e811a63d82eac33aad889c78becbfc70603

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

原文发布时间:2018年06月29日

作者:天工开物_152368

本文来源:CSDN  如需转载请联系原作者

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

cacao111
文章80篇 | 关注7
关注
用配置管理(Application Configuration Management,简称 ... 查看详情
业内领先的面向企业的一站式研发提效平台(研发效能),通过项目流程管理和专项自动化提效工具,能... 查看详情
一项针对阿里云资源和互联网应用进行监控的服务。云监控服务可用于收集获取阿里云资源的监控指标,... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云9.10会员日

阿里云9.10会员日