Vue3部署IIS服务器刷新/直接访问子路由返回404求助

这个问题的核心原因是Vue3属于单页应用（SPA），前端路由是在浏览器端完成跳转的：从主页通过菜单切换路由时，是Vue内部逻辑处理，不会向IIS发送新的资源请求；但直接访问/map这类路由或刷新页面时，IIS会尝试在服务器上寻找对应物理路径的文件，找不到就返回404。解决思路是配置IIS的URL重写，让所有路由请求都转发到index.html，由Vue接管路由处理。

具体操作步骤： #

1. 安装IIS URL重写模块 #

如果你的IIS尚未安装URL重写模块，打开服务器管理器 → 添加角色和功能，在“Web服务器”的“应用开发”分类下找到URL重写，完成安装。

2. 添加web.config配置文件 #

在Vue项目的public目录下创建web.config文件，填入以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle SPA Routes" 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>
    <httpErrors errorMode="Custom">
      <remove statusCode="404" subStatusCode="-1" />
      <remove statusCode="500" subStatusCode="-1" />
      <error statusCode="404" path="/" responseMode="ExecuteURL" />
      <error statusCode="500" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

• 规则说明：所有不是物理文件或目录的请求，都会被重写到根目录的index.html，交由Vue处理路由。
• 额外配置：自定义404/500错误跳转，确保异常情况也能回到Vue应用内处理。

3. 重新部署应用 #

执行npm run build生成dist目录，将dist下的所有文件（包括自动复制过来的web.config）上传到IIS站点的根目录，重启IIS站点即可。

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