先解决history模式的问题：

1. 安装IIS UrlRewrite
2. 在网站根目录中创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" /> //通配所有连接
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          //因为是单页面，所以将所有连接重定向到 “/”，就是指向我们项目中的首页
          <action type="Rewrite" url="/" /> 
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

以上配置完其实可以在IIS界面中看到：

好了以上解决了路由404的问题，但发现接口不能访问，导致页面没有数据了，为了解决跨域的问题我在vue中是这么配置的：

module.exports = {
  devServer:{
    proxy:{
      '/api':{
        target:'http://www.test.com',
        changeOrigin:true,
        ws:true,
        pathRewrite:{'^/api':'' }
      }
    }
  }
 }

所以依照刚刚在web.config中配置的内容，所有访问/api/XXXX的链接都会指向“/”，这就有问题，所以要给IIS配置反向代理：

1. 下载安装ARR（Application Request Routing）
2. 按照下图依次点击红框
   
   
   
   3.回到我们的网站，打开URL重写，添加新的规则
   
   
   填写正则表达式 ^(api)(.*)$ 通配所有api的链接

条件输入： {HTTP_POST} 模式：^localhost:8022$ 这里是你要发布的域名
这里填写接口所在域名，{R:2}表示后面所带的参数

The End!