window 站点 vue3编译后的项目刷新页面404解决办法
Vue3项目在Windows llS服务器上部署后刷新页面出现404错误,这是因为Vue Router使用了
HTML5 History模式 2 3。当直接访问或刷新子路由时,IIS会尝试寻找对应的物理文件或目录,但
Vue作为单页面应用(SPA)实际上只有一个 index.html 入口。
解决方案
方法一:配置IIS URL重写(推荐)
这是最彻底的解决方案,需要在IIS中配置URL重写规则:
1.安装URL重写模块:首先确保服务器已安装IIS URL重写模块 4
2.创建web.conhg文件:在项目根目录创建 web.config 文件,添加以下配置:
<rewrite>
日 web.config 5
6
<rules><!--核心规则:匹配,所有非文件和非目录的请求,重写到index.html --><rule name="Vue Router SPA" stopProcessing="true">
7
8
9
<match url=".*”/><conditions logicalGrouping="MatchAll">
20双22B好崧昪梃狻1516I崧7281920212223改2627
<add input="{REQUEST FILENAME}" matchType="IsFile" negate="true" /><add input="{REOUEST FILENAME}" matchType="IsDirectory" negate="true” />
</conditions>
<action type-"Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<!--处理静态资源,设置正确的MIME类型-->
<staticContent>
<mimeMap fileExtension=".js" mimeType-"application/javascript" /><mimeMap fileExtension=".css" mimeType="text/css" /><mimeMap fileExtension=".json" mimeType="application/json" />
</staticcontent>
</system.webServer></configuration>
28<code end>
此配置通过IIS的URL重写模块,将所有非真实文件或目录的请求重定向到`index,htm1`,中前端vue Router接管路由设

浙公网安备 33010602011771号