解决 Vue 路由在 IIS 中的 404 问题

原创于 2025-08-08 18:31:00 发布 · 523 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端 #ecmascript #前端框架

安装 URL Rewrite 模块：https://www.iis.net/downloads/microsoft/url-rewrite

配置 web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" 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>
    
    <!-- 如果还需要处理静态文件缓存，可以添加以下内容 -->
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
    </staticContent>
    
    <!-- 处理 Vue 单页应用 404 问题 -->
    <httpErrors errorMode="Custom" existingResponse="Replace">
      <remove statusCode="404" />
      <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

在 IIS 管理器中：确保应用程序池使用无托管代码的集成模式
添加 MIME 类型(如果尚未存在)：扩展名: .js
MIME 类型: application/javascript

或者

<configuration>
  <system.webServer>
    <!-- 1. 强制正确的 MIME 类型 -->
    <staticContent>
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <remove fileExtension=".mjs" />
      <mimeMap fileExtension=".mjs" mimeType="application/javascript" />
            <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>

    <!-- 2. 精确的 URL 重写规则 -->
    <rewrite>
      <rules>
        <!-- 规则1：放行所有真实存在的文件 -->
        <rule name="Static Files" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api|auth|connect)/" negate="true" />
          </conditions>
          <action type="None" />
        </rule>

        <!-- 规则2：放行静态资源目录 -->
        <rule name="Static Assets" stopProcessing="true">
          <match url="(assets|static|js|css|img)/(.*)" />
          <action type="None" />
        </rule>

        <!-- 规则3：其他请求重定向到 index.html -->
        <rule name="Vue Router" 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>