将 Vue 3 应用程序部署到 IIS 后解决 404 或 500 错误

一. 引言

将 Vue 3 应用程序部署到 Internet Information Services (IIS) 可能会导致一些意想不到的问题，比如在访问路由时出现 404 错误，尤其是在刷新页面时。本文将探讨如何正确部署 Vue 3 应用程序并解决常见的 404 或 500 错误。

二. 问题原因

当我们使用 Vue CLI 构建 Vue 应用时，它生成一个名为 index.html 的文件以及相关的 JavaScript 和 CSS 文件。由于它更像是一个静态 HTML 网站，只有一个物理 HTML 文件，因此当我们在应用中访问 /time-table 等其他路由并刷新页面时，IIS 会寻找名为 time-table.html 的物理 HTML 文件。当 IIS 找不到该文件时，就会抛出 404 错误，因为生成的 dist 文件夹中只有一个 HTML 文件，即 index.html。

三. 解决方案

为了解决上述问题，有两种解决方案：

1. 使用哈希（#）路由模式创建 Vue 路由。
2. 通过在 IIS 的 web.config 文件中编写 URL 规则来重写 URL。

3.1 解决方案 1：哈希模式

在 Vue 应用中，有两种路由模式：

• 哈希模式
• 历史模式

我们使用哈希模式创建 Vue 路由时，URL 的实际路径不会改变（例如 /home），而是使用 URL 的哈希部分（# 后的部分）来跟踪当前路由。例如，使用历史模式的路径是 http://example.com/home，而使用哈希模式时，路径则为 http://example.com/#/home。

3.2 解决方案 2：URL 重写

由于 Vue Router 默认使用 HTML5 历史模式，因此您需要设置 URL 重写，以确保所有路由都重定向到 index.html。要做到这一点，您需要在 dist 文件夹中添加一个 web.config 文件并编写 URL 规则。不过，这些 URL 重写规则仅在您安装了 IIS 的 URL 重写模块后才能工作。

四. 步骤

1. 从微软官方网站下载 URL 重写模块（URL Rewrite Module）。
2. 安装该模块并重启 IIS。
3. 在 dist 文件夹中添加 web.config 文件，并将以下配置设置添加到 web.config 文件中：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Vue Routes" 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="/" /> <!-- 将 URL 重写为 index.html -->
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

五. 规则解释

• **match url=".*"**：匹配所有传入请求。
• **conditions**：检查请求的文件或目录是否不存在。
• **action**：将 URL 重写为 index.html，以处理任何不匹配的路由。

六. 测试

部署后，使用适当的 URL 访问您的应用程序。测试不同的路由以确保一切正常。

七. 结论

在 IIS 上部署 Vue 3 应用程序可以通过正确的配置变得简单。通过遵循上述步骤并实施 URL 重写，您可以有效处理客户端路由，并消除常见的 404 错误。