React 脚手架在IIS上进行部署
利用react脚手架生成一个初始的项目
- 我们需要先执行下面命令安装脚手架
npm install -g create-react-app
- 利用脚手架创建React项目
执行以下命令进行项目创建 其中 project 为项目名称,会在当前目录下创建该文件夹并生成项目文件,执行完之后就直接可以进入目录启动项目
create-react-app project
-
启动React项目
切换到项目文件夹
cd project
并启动项目npm start
.
项目启动后会自动打开浏览器,如果出现如下页面,则说明项目创建成功:
本文的主要内容是讲解如何对react脚手架创建项目进行快速打包和部署到IIS上,下面将进行讲解。
将项目进行打包
- 修改package.json 文件
在package.json里添加"homepage":"."
,这里是解决打包后js,css等文件的路径问题,如果不设置,会出现打开index.html页面空白的问题,具体如下图:
- 执行打包命令
npm run build
打包完成后,我们会发现一个build文件夹,这个就是打包后的项目,我们需要将这个文件夹在IIS上进行部署。
目录结构如下图:
注意:这里的目录是创建完脚手架没有进行任何修改而进行打包的项目
将打包后的项目部署在IIS上
如果你的电脑并未进行IIS配置,网上的如何进行IIS配置的文章有很多,这里就不进行介绍,这里默认电脑上已经有IIS。
-
右键点击
网站
,选择添加网站
后弹出:
物理路径选择刚刚打包后的build文件夹,下面的都可以选择为默认 -
右键刚刚新建的网站,点击
管理网站
,点击浏览
如果出现上面的页面,则说明部署成功。
结尾有话说
如果你的项目使用到了路由,我推荐最外层使用HashRouter,不然会出现部署之后的项目刷新之后页面空白的错误。关于此问题可以参考 文章地址