在将使用 Vue Router 的 History 模式项目部署到 IIS 时，可能会遇到刷新页面或直接访问非首页 URL 时返回 404 的问题。这是因为 IIS 默认会尝试在物理路径下查找对应的文件或文件夹，而单页面应用（SPA）的路由是由前端接管的。以下是解决方案。
1. 核心修复方案：安装 URL 重写工具
1.1 安装 URL Rewrite 模块
IIS 默认不支持伪静态重写，因此需要安装微软官方提供的 URL Rewrite 模块：
- 官方下载地址：IIS URL Rewrite Module
- 注意：安装完成后需重启 IIS 管理器。
1.2 配置 web.config
在 Vue 项目的打包输出目录（通常是 dist 文件夹）下，新建一个名为 web.config 的文件，并将以下内容粘贴进去：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Vue Router Rules" 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>
子目录部署注意： 如果你的项目访问路径是
http://domain.com/my-app/，请将最后一行修改为：
<action type="Rewrite" url="/my-app/" />
2. 辅助检查清单
如果配置 web.config 后问题仍未解决，请检查以下关键点：
2.1 MIME 类型支持
部分静态资源（如 .json、.woff2、.webp）可能因 IIS 未注册对应的文件类型而导致 404 错误。解决方法如下：
- 打开 IIS 管理器，选择对应的 站点。
- 双击 MIME 类型。
检查以下文件类型是否已注册，若无则手动添加：
.json->application/json.woff2->font/x-woff2.webp->image/webp
2.2 基础路径 (Public Path)
确保 Vue 项目的构建配置与实际部署路径一致：
- Vite (
vite.config.ts):
javascript
base: '/' // 或 base: '/my-app/' - Vue CLI (
vue.config.js):
javascript
publicPath: '/' // 或 publicPath: '/my-app/'
2.3 文件夹权限
确保 IIS 对部署目录（通常是 dist 文件夹）具有读取权限：
- 右键
dist文件夹，选择 属性，切换到 安全 选项卡。 - 点击 编辑 -> 添加 -> 输入
IIS_IUSRS。 - 勾选 读取和执行、列出文件夹内容、读取，然后保存。
3. 常见错误及调试建议
3.1 错误代码及原因
- 404.0 错误：通常由路径错误或物理文件丢失引起。
- 404.4 错误：通常由未安装 URL Rewrite 模块导致，
web.config配置未生效。 - 500.19 错误：通常由
web.config格式错误或文件权限不足引发。
3.2 调试工具
- 使用浏览器开发者工具（Network 面板）检查请求路径和返回的状态码。
- 查看 IIS 日志（默认路径：
%SystemDrive%\inetpub\logs\LogFiles）获取详细的错误信息。 - 使用 IIS 自带的 请求筛选 和 失败请求跟踪规则 功能，精确定位问题。
需要我帮你针对特定的子目录路径（例如 /admin）重新生成一份 web.config 文件吗？请随时告知！
