一、问题现象（

项目环境：

• 前台项目：http://localhost/CL/
• 后台项目：http://localhost/CLadmin/
• 框架：Vue3 + Vue-Router

现象：

1. 页面内点击菜单跳转完全正常
2. 一按 F5 刷新页面 → 直接报 404 / 403.18 错误
3. 首次进入正常，刷新就崩

二、根本原因（最核心、最易懂的解释）

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
• 不用配置重写规则
• 不用处理跨应用池

真正一劳永逸！