React 脚手架在IIS上进行部署

React 脚手架在IIS上进行部署

利用react脚手架生成一个初始的项目

1. 我们需要先执行下面命令安装脚手架

npm install -g create-react-app

2. 利用脚手架创建React项目

执行以下命令进行项目创建 其中 project 为项目名称，会在当前目录下创建该文件夹并生成项目文件，执行完之后就直接可以进入目录启动项目
create-react-app  project

3. 启动React项目

   切换到项目文件夹 cd project 并启动项目 npm start.
   项目启动后会自动打开浏览器，如果出现如下页面，则说明项目创建成功：
   
   本文的主要内容是讲解如何对react脚手架创建项目进行快速打包和部署到IIS上，下面将进行讲解。

将项目进行打包

1. 修改package.json 文件
   在package.json里添加"homepage":"."，这里是解决打包后js,css等文件的路径问题，如果不设置，会出现打开index.html页面空白的问题，具体如下图：
   
2. 执行打包命令

npm run build

打包完成后，我们会发现一个build文件夹，这个就是打包后的项目，我们需要将这个文件夹在IIS上进行部署。
目录结构如下图：

注意：这里的目录是创建完脚手架没有进行任何修改而进行打包的项目

将打包后的项目部署在IIS上

如果你的电脑并未进行IIS配置，网上的如何进行IIS配置的文章有很多，这里就不进行介绍，这里默认电脑上已经有IIS。

1. 右键点击网站，选择添加网站后弹出：
   
   物理路径选择刚刚打包后的build文件夹，下面的都可以选择为默认

2. 右键刚刚新建的网站，点击管理网站，点击浏览
   
   如果出现上面的页面，则说明部署成功。

结尾有话说

如果你的项目使用到了路由，我推荐最外层使用HashRouter，不然会出现部署之后的项目刷新之后页面空白的错误。关于此问题可以参考 文章地址