Windows IIS 服务器部署 Vue3 前端项目详细流程

**摘要：**本文详细介绍了在 Windows 系统的 IIS 服务器上部署 Vue3 前端项目的完整流程。主要内容包括：环境与工具准备（Windows Server、IIS、Node.js）、项目构建与静态文件生成、IIS 网站配置、Vue Router 历史模式处理、部署后的测试与访问验证，以及常见问题排查和后续维护建议。通过清晰的步骤说明和流程图，旨在帮助开发者系统化地完成部署，并确保应用在生产环境中稳定运行。

部署流程图

以下是 Vue3 项目在 IIS 上部署的完整流程图，涵盖了从环境准备、构建、配置到测试的所有关键步骤：

flowchart TD A[开始部署] --> B[环境与工具准备] B --> B1[Windows Server] B --> B2[安装 IIS] B --> B3[安装 Node.js] B --> B4[准备 Vue3 项目源码] B4 --> C[构建 Vue3 项目] C --> C1[上传项目源码到服务器] C1 --> C2[打开命令行并进入项目目录] C2 --> C3[安装依赖 npm install] C3 --> C4[构建项目 npm run build] C4 --> C5[生成 dist 静态文件夹] C5 --> D[配置 IIS 网站] D --> D1[打开 IIS 管理器] D1 --> D2[添加新网站] D2 --> D3[设置网站名称、物理路径、绑定] D3 --> D4[配置默认文档 index.html] D4 --> D5[可选：配置 MIME 类型] D5 --> E{是否使用 Vue Router history 模式？} E -- 是 --> F[处理 Vue Router 历史模式] F --> F1[安装 URL 重写模块] F1 --> F2[创建 web.config 文件] F2 --> F3[配置 URL 重写规则] F3 --> F4[重启 IIS 网站] E -- 否 --> G[直接进入测试] F4 --> G G --> H[测试与访问] H --> H1[本地测试 localhost] H1 --> H2[外部访问测试] H2 --> H3[路由测试（如适用）] H3 --> I[部署成功] I --> J[常见问题排查] J --> J1[403 权限问题] J --> J2[404 文件未找到] J --> J3[静态资源加载失败] J --> J4[端口被占用] I --> K[后续维护建议] K --> K1[自动化部署 CI/CD] K --> K2[日志监控] K --> K3[性能优化与缓存] style A fill:#e1f5fe style I fill:#c8e6c9 style J fill:#ffecb3 style K fill:#f3e5f5

**流程说明：**该流程图展示了从零开始到成功部署的完整路径。绿色节点表示成功状态，黄色节点表示可能需要排查的问题环节，蓝色为起始节点。按照流程图顺序执行，可确保部署过程系统化、无遗漏。

1. 环境与工具准备

在开始部署前，请确保你的 Windows 服务器已具备以下环境：

Windows Server：建议使用 Windows Server 2016 或更高版本。
IIS (Internet Information Services)：服务器角色，用于托管 Web 应用。
Node.js ：用于构建 Vue3 项目。请从官网下载并安装 LTS 版本。
Vue3 项目源码：已完成开发，可通过 Git 克隆或直接上传至服务器。

此外，你还需要在服务器上安装以下 IIS 功能模块（若未安装）：

Web 服务器 (IIS)
静态内容
默认文档
目录浏览（可选，建议关闭）
HTTP 错误
请求筛选
.NET Extensibility（如果项目涉及 .NET 后端）

2. 构建 Vue3 项目

在服务器上构建项目，生成用于生产环境的静态文件。

上传项目源码 ：将你的 Vue3 项目文件夹（例如 my-vue-app）上传到服务器的一个目录，例如 C:\Websites\my-vue-app。
打开命令提示符 ：以管理员身份运行 CMD 或 PowerShell，并导航到项目目录：
bash 复制代码
```
cd C:\Websites\my-vue-app
```
安装依赖 ：运行以下命令安装项目所需的所有 npm 包：
bash 复制代码
```
npm install
```
构建项目 ：执行构建命令，生成 dist 文件夹：
bash 复制代码
```
npm run build
```
构建完成后，你会在项目根目录下看到一个 dist 文件夹，里面包含了所有静态资源（HTML、CSS、JS、图片等）。

3. 配置 IIS 网站

接下来，在 IIS 管理器中创建并配置一个新的网站来托管你的 Vue3 应用。

打开 IIS 管理器：在服务器管理器中，点击"工具" -> "Internet Information Services (IIS) 管理器"。
添加网站 ：
- 在左侧"连接"面板中，右键点击"网站" -> "添加网站"。
- 填写网站信息：
  - 网站名称：例如 "MyVueApp"。
  - 物理路径 ：指向你 Vue3 项目构建后的 dist 文件夹，例如 C:\Websites\my-vue-app\dist。
  - 绑定：
    - 类型：http 或 https（如果已配置 SSL 证书）。
    - IP 地址：选择"全部未分配"或指定服务器 IP。
    - 端口：默认 80（HTTP）或 443（HTTPS）。
    - 主机名：如果你的域名已解析到此服务器，可在此填写（例如 vueapp.yourdomain.com）。
设置默认文档 ：
- 在 IIS 管理器中，点击你刚创建的网站（例如 "MyVueApp"）。
- 双击"默认文档"功能。
- 确保列表中存在 index.html，并将其上移到首位。这是 Vue 路由（如 vue-router）正常工作所必需的。
配置静态内容 MIME 类型（可选）：如果项目中有特殊文件类型（如 .woff2 字体），IIS 可能无法识别。可以在"MIME 类型"中添加相应的类型。

4. 处理 Vue Router 的历史模式

如果你的 Vue3 项目使用了 Vue Router 并设置为 history 模式，需要额外配置 IIS 的 URL 重写，以确保直接访问或刷新子路由时能正确返回 index.html。

安装 URL 重写模块 ：如果服务器尚未安装，请从 Microsoft 官网下载并安装 "URL Rewrite" 模块。
创建 web.config 文件 ：在 dist 文件夹根目录下，创建一个名为 web.config 的 XML 文件。

配置重写规则 ：将以下内容复制到 web.config 文件中：

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Vue Router History Mode" 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" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

此规则会将所有非真实文件或目录的请求重写到 index.html，由 Vue 应用内部的路由器处理。

重启网站：在 IIS 管理器中，右键点击你的网站，选择"管理网站" -> "重新启动"。

5. 测试与访问

本地测试 ：在服务器浏览器中访问 http://localhost 或你配置的端口，检查应用是否正常加载。
外部访问测试：从同一网络内的另一台计算机，通过服务器的 IP 地址或域名访问网站，确保网络和防火墙设置允许外部连接。
路由测试 ：如果使用了 Vue Router，尝试直接访问一个子路由（例如 http://yourserver/about），页面应能正常显示，而不是返回 404 错误。

6. 常见问题与排查

403 禁止访问 ：检查 dist 文件夹的 NTFS 权限，确保 IIS 应用程序池标识（通常是 IIS_IUSRS）具有读取权限。
404 文件未找到 ：确认默认文档已正确设置为 index.html，并且 web.config 文件（如果使用 history 模式）已放置在 dist 根目录。
静态资源（CSS/JS/图片）加载失败 ：检查资源路径是否正确。在 Vue 项目中，确保 vue.config.js 中的 publicPath 设置正确（通常为 './' 或 '/'）。
端口被占用：如果默认的 80 端口被占用，可以在网站绑定中更换为其他端口（如 8080），并在防火墙中开放该端口。

7. 后续维护建议

自动化部署：可以考虑使用 CI/CD 工具（如 Jenkins、GitLab CI/CD）在代码推送后自动构建并同步文件到服务器。
日志监控：在 IIS 中启用失败请求跟踪和日志记录，便于排查问题。
性能优化：为静态资源（如 JS、CSS、图片）配置客户端缓存，减少服务器负载并提升用户体验。