VUE History模式下项目在IIS部署刷新后404

项目使用 vue-element-admin 方案，采用History模式打包后进行部署，在刷新页面后会出现404问题。

参考文档：

不同的历史模式 | Vue Router (vuejs.org)

<?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>

按步骤在dist文件夹下创建该文件

重新启动web报500错误

这个错误的主要原因是没有安装 URL Rewrite，在微软官网下载安装URL Rewrite

URL Rewrite : The Official Microsoft IIS Site

按照计算机版本安装好URL Rewrite 后，在IIS中可以看到URL重写这个图标

点击进去可以发现 之前web.config文件下的规则已应用了

重启IIS，iisreset 。网页就可以正常访问了。

---

另外还有一种方法是在iis中自己添加规则，自动生成web.config。

模式: .*

规则: {REQUEST_FILENAME} 

操作类型: 重写

重写URL: /

点击应用后，web.config 自动生成