一、问题现象（
项目环境：
- 前台项目：
http://localhost/CL/ - 后台项目：
http://localhost/CLadmin/ - 框架：Vue3 + Vue-Router
现象：
- 页面内点击菜单跳转完全正常
- 一按 F5 刷新页面 → 直接报 404 / 403.18 错误
- 首次进入正常，刷新就崩
二、根本原因（最核心、最易懂的解释）
1. 什么是 SPA（单页应用）？
整个项目只有一个 index.html 所有路由 /home、/login、/user/list 都是前端 JS 模拟出来的虚拟路径 服务器上根本不存在这些文件夹！
2. 为什么跳转正常、刷新报错？
- 菜单跳转 ：JS 改地址栏，不请求服务器 → 正常
- 浏览器刷新 ：把完整地址发给 IIS，IIS 去找真实文件夹→ 找不到 → 报 404 → 如果你配置了反向代理 / 跨应用池 → 报 403.18 无权重写
3. 为什么会出 403.18？
IIS 安全策略：默认禁止跨应用程序池进行 URL 重写你的前端、接口、代理不在一个池刷新时 IIS 拦截 → 403.18
三、终极最简单解决方案（不用改 IIS、不用配 web.config）
✅ 方案：把路由从 History 模式 → Hash 模式
只改一行代码，永久解决
修改方法（Vue3/Vue-Router4）
javascript
运行
// 原来（报错的写法）
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})
// 改成（不报错的写法）
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes
})为什么这样改就好了？
# 号后面的路由 不会发送给服务器 刷新时，IIS 只收到 localhost/CL/永远只会访问 index.html永远不会 404 / 403.18
四、修改后效果
- 地址变成：
http://localhost/CL/#/home - 刷新任意页面都正常
- 不用改 IIS
- 不用加 web.config
- 不用配置重写规则
- 不用处理跨应用池
真正一劳永逸！