Vue.js应用部署至Azure Web APP后刷新非默认页面报404错误如何解决

DevOps 小满

2026-11-4

问题根源

当前web.config存在规则冲突，是触发404的核心原因：

你配置了两个功能高度重叠的URL重写规则，且第一个规则设置了stopProcessing="true"，匹配成功后会直接中断后续所有规则的执行，第二个冗余规则根本不会被触发
两个规则的匹配逻辑交叉、重写目标不统一，会干扰IIS URL重写模块的正常判定，最终非首页的刷新请求无法被正确转发到入口文件index.html，直接返回404错误。

Windows/IIS 环境修复方案

删除冗余的重复规则，将web.config替换为仅保留单条SPA重写逻辑的版本，完整内容如下：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Vue History Mode Rewrite" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- 跳过真实存在的静态文件、目录请求，避免静态资源被错误重写 -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <!-- 所有不匹配真实资源的请求，统一重写到入口文件index.html，保留请求参数 -->
          <action type="Rewrite" url="/index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

替换完成后，确认web.config文件放置在站点根目录wwwroot下，无需手动重启站点，后续请求即可正常生效。

Linux 环境 Azure App Service 配置方案

如果使用的是Linux版本的Azure App Service，无需编辑web.config，直接通过Azure Portal操作即可完成配置：

进入对应App Service的「配置」-「应用程序设置」板块
找到「启动命令」配置项，填入启动命令：pm2 serve /home/site/wwwroot --no-daemon --spa
保存配置等待服务自动重启，该启动命令会通过pm2静态服务模块自动处理SPA路由的重定向逻辑，所有history模式路由的刷新请求都会被正确转发到index.html，不会再触发404。