部署在AWS EC2 IIS的VueJS应用History Mode失效问题求助

我之前也踩过这个坑——明明按官方文档放了web.config，刷新还是404，大概率是配置细节或者IIS的基础设置没到位，咱们一步步来排查解决：

1. 先补全你的web.config规则 #

你贴的代码片段不完整，先确保rewrite规则是完整且正确的，标准的History Mode配置应该是这样：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle Vue History Mode" 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>
    <!-- 可选：如果需要自定义404跳转回应用 -->
    <httpErrors errorMode="Custom">
      <remove statusCode="404" subStatusCode="-1" />
      <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

重点注意：如果你的Vue应用部署在子目录（比如http://你的EC2IP/vue-app/），要把<action>里的url="/"改成对应子路径，比如url="/vue-app/"。

2. 确认IIS安装了URL Rewrite模块 #

这是最容易被忽略的点！IIS默认不带URL重写功能，你得在EC2的Windows服务器上安装它：

• 打开服务器管理器，通过「添加角色和功能」找到Web服务器（IIS）下的URL Rewrite模块安装
• 安装完成后记得重启IIS服务，否则配置不会生效

3. 检查文件路径与权限 #

• 确保Vue打包后的dist文件夹内容完整上传到了IIS站点的物理路径下，web.config必须放在dist的根目录（也就是IIS站点的根路径）
• 给IIS的应用池用户（比如IIS_IUSRS）分配该文件夹的读取权限，避免因为权限不足导致配置无法被读取

4. 验证重写规则是否被识别 #

打开IIS管理器，进入你的站点，找到「URL重写」功能，如果能看到你配置的规则，说明web.config被正确识别；如果看不到，要么是路径放错了，要么是权限有问题。

5. 子目录部署额外配置 #

如果是子目录部署，除了修改web.config，还要在Vue项目的vue.config.js里配置publicPath：

module.exports = {
  publicPath: '/vue-app/' // 对应你的子目录路径
}

重新打包后再上传到服务器的对应子目录，确保web.config也放在这个子目录里。

内容的提问来源于stack exchange，提问作者VAAA