IIS部署vue3项目路由重定向

### 配置 Vue3 项目在 IIS 中的路由重定向 为了使 Vue Router 的 HTML5 History 模式正常工作，在 IIS 上部署 Vue3 应用程序时，需要正确配置 Web.config 文件来处理路由重定向。当请求未匹配任何物理文件或目录时，应将这些请求重定向到 `index.html`。 #### 创建并编辑 web.config 文件 确保在应用程序根目录下存在名为 `web.config` 的 XML 文件，并包含以下内容： ```xml <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <!-- 启用静态文件 --> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> <!-- 设置默认文档 --> <defaultDocument enabled="true"> <files> <add value="index.html" /> </files> </defaultDocument> <!-- 路由重写规则 --> <rewrite> <rules> <rule name="Handle History Mode and custom 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="/index.html" appendQueryString="true" logRewrittenUrl="false"/> </rule> </rules> </rewrite> <!-- 处理CORS跨域资源共享 --> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> ``` 此配置实现了几个重要功能： - 对于不存在的实际资源（既不是文件也不是目录），所有请求都将被重写至 `/index.html`[^4]。 - 支持 CORS 请求头以便前端可以访问 API 接口[^3]。 #### 安装必要的 IIS 组件 除了上述配置外，还需要确保已安装 URL Rewrite Module 和 Application Request Routing (ARR) 模块以支持路径重写操作。可以通过 Microsoft 下载中心获取最新版本的 URL Rewrite Tool[^2] 并按照提示完成安装过程。 通过以上步骤可以在 IIS 上成功实现 Vue3 单页面应用(SPA)的历史模式(History mode)，从而解决了由于缺少适当配置而导致的空白页或其他异常情况下的显示问题[^1]。