如何使用IIS管理器上部署react项目，支持history和hash模式路由部署

在windows上使用IIS管理器可以很方便部署我们的项目文件，前端往往是部署一些静态资源文件。当我们需要部署react项目打包之后的build文件夹中的代码时，我们该如何去操作呢？

前期准备

本文假设你已具备react的基本使用能力，以及你已经在你的设备上配置好了IIS管理器，并已经能独立创建网站。让我们开始我们的配置吧！

修改React项目打包配置

1）项目弹出配置

npm run eject

在webpack.config.js中我们关注一下打包输出文件的公共路径

output: {
  // ...
  // webpack uses `publicPath` to determine where the app is being served from.
  // It requires a trailing slash, or the file assets will get an incorrect path.
  // We inferred the "public path" (such as / or /my-project) from homepage.
  publicPath: paths.publicUrlOrPath,
  
},

根据对应的提示，我们在package.json中的homepage添加我们公共路径，用以解决在部署时，因为路径找不到导致文件加载失败。

修改package.json

{
  "name": "myreact",
  "version": "0.1.0",
  "homepage": "/项目文件夹名/",
  "private": true,
}

2）在项目public文件夹中，添加IIS服务器配置文件，用于重写首页地址，新建web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
      <rewrite>
        <rules>
          <rule name="pipei" patternSyntax="Wildcard">
            <match url="*.*" negate="true" />
            <action type="Rewrite" url="/改成你的项目文件夹名/index.html" />
          </rule>
        </rules>
      </rewrite>
  </system.webServer>
</configuration>

3）react项目中需要注意，路由的问题

使用HashRouter 可直接打包部署

使用BrowserRouter 时，需要添加basename，否则部署后页面空白

import React from 'react'
import ReactDOM from 'react-dom'
// router
import { BrowserRouter as Router } from 'react-router-dom'
// redux
import { Provider } from 'react-redux'
import store from '@/store'

ReactDOM.render(
  <Router basename="/你的文件夹名">
    {/* 将跟组件包起来，进行内容的分发，同时也省下了每个子组件都要引入store的问题 */}
    <Provider store={store}>
      <App />
    </Provider>
  </Router>,
  document.getElementById('root')
)

4）npm run build打包

IIS部署

将上一步中build之后打包的文件，拷贝到同文件夹名的网站文件夹目录下，即可访问了。