Vue 项目部署到 IIS 并不复杂，核心就三步：本地构建出 dist 静态文件、在 Windows 服务器上启用 IIS 并安装 URL Rewrite、把 dist 目录设为站点物理路径，再配好 web.config 处理 history 路由刷新 404。
部署前要准备什么：先别急着上传文件
先把环境理清楚,后面操作会顺畅很多。
- 确认服务器系统：Windows Server 2019、2026 或 Windows 10/11 专业版都可以，IIS 是系统自带功能,不用额外付费。
- 确认 Vue 项目路由模式：hash 模式部署最简单，history 模式需要额外配置重写规则。
- 准备基础工具：能远程桌面登录服务器，本地 Node.js 环境能执行
npm run build。 - 确认部署层级：部署在站点根目录还是子目录，会影响 publicPath 和 web.config 写法。
vue项目部署到iis服务器详细步骤：从本地构建到站点上线
第一步：本地构建出生产包
进入 Vue 项目根目录，执行 npm run build，构建完成后，项目里会生成 dist 文件夹,这个文件夹就是需要上传的全部内容。
构建前先检查 vue.config.js 里的 publicPath 配置，部署在 IIS 站点根目录时，publicPath 设为 ；部署在子目录，/portal/，就要设成 '/portal/'，这一步做错,后面很容易出现空白页。
第二步：在服务器上安装 IIS 与 URL Rewrite 模块
打开服务器管理器，添加角色和功能，勾选 Web 服务器（IIS），必须勾选“静态内容”和“HTTP 错误”功能，否则 IIS 可能无法正确返回 index.html。
安装完 IIS 后，history 路由部署还需要 URL Rewrite 模块，这个模块不属于 IIS 默认组件，需要到微软官方页面下载安装，如果服务器不能联网,建议提前准备离线安装包。
第三步：创建站点并指向 dist 目录
把本地 dist 文件夹整体上传到服务器，比如放在
D:sitesvue-app，打开 IIS 管理器，右键“网站”，选择“添加网站”。
填写站点名称，物理路径指向 dist 目录，绑定 IP 和端口，没有域名时，先用服务器 IP 加端口测试，点击“浏览”能看到页面,说明静态资源加载正常。
第四步：iis部署vue项目刷新404怎么解决
history 模式下直接访问 /user/list 这类前端路由，IIS 会去服务器寻找真实文件 user/list，找不到就返回 404，解决办法是在站点根目录放一个 web.config 文件，把非文件非目录请求重写到 index.html。
vue history模式iis配置：web.config 正确写法和位置
web.config 要放在 dist 根目录，也就是站点物理路径下,文件内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Vue 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，如果接口路径也是 /api/ 开头，需要额外加条件排除，否则 /api/login 也会被重写到 index.html，导致接口 404，可以在 conditions 里再加一条：
<add input="{REQUEST_URI}" pattern="/api/" negate="true" />
URL Rewrite 模块没安装，web.config 里的 rewrite 节点会让站点直接报 500，此时要么先安装模块，要么暂时删掉 rewrite 配置。
hash 模式和 history 模式的部署差异可以看这个表：
| 对比项 | hash 模式 | history 模式 |
|---|---|---|
| 是否需要 web.config | 不需要 | 需要 |
| 刷新或直接访问前端路由 | 不会 404 | 默认会 404 |
| URL 美观度 | 带 # 号 | 更干净 |
| 部署复杂度 | 低 | 中等 |
iis发布vue项目空白页怎么排查：按顺序检查这五点
出现空白页不要慌，多数情况下不是 Vue 代码问题，而是路径或 IIS 配置问题,按下面顺序排查：
- 第一步：打开浏览器开发者工具，看控制台报错，大部分空白页是 JS 或 CSS 路径 404 导致。
- 第二步：检查
vue.config.js的publicPath是否与 IIS 站点层级一致,子目录部署最容易在这里出错。 - 第三步：检查 IIS 站点是否误启用了“目录浏览”，不要把目录浏览当首页，应设置默认文档为 index.html。
- 第四步：检查 MIME 类型，IIS 默认包含 .js、.css、.html 的 MIME 映射，如果服务器被安全软件改过，可能缺少 application/javascript,导致脚本不执行。
- 第五步：检查 web.config 是否格式错误，可暂时移除 rewrite 规则，用 hash 模式验证静态资源是否正常。
Windows Server 2019部署Vue项目：权限与防火墙细节
在 Windows Server 2019 上部署，账户权限容易被人忽略，站点物理路径所在的文件夹要给 IIS_IUSRS 用户读取权限。
dist 放在 D 盘，需要进入文件夹属性，在安全选项卡里添加 IIS_IUSRS，授予读取和执行权限，否则可能出现 401.3 或 403 错误。
防火墙方面，如果绑定非 80 端口，8080，需要在 Windows 防火墙入站规则里放行该端口，很多部署完成后外网访问不了，问题不在 IIS，而在服务器安全组或本机防火墙,国内云服务器还要在控制台安全组里放行对应端口。
部署成子应用时怎么配置：场景化操作
有些团队把 Vue 项目部署成主站下的子应用，/admin/，这时要同时在 Vue 和 IIS 两边调整。
- Vue 端：
vue.config.js里publicPath设置为'/admin/'，路由base也设置为'/admin/'。 - IIS 端：在主站点下添加应用程序，别名
admin，物理路径指向子应用的dist文件夹。 - web.config 的 rewrite action 要写成
/admin/index.html，而不是/index.html。
这个场景容易出现的错误是：publicPath 改了但路由 base 没改，或者 web.config 写错重写路径。
Vue 部署到 IIS 的关键不是上传文件本身，而是三个配置点对齐：publicPath、web.config 重写规则、站点物理路径权限，只要这三个点一致，history 模式也能稳定运行。
Q&A：vue项目部署到iis服务器相关问题
vue项目部署到iis服务器一定要用 web.config 吗？
不是，Vue 项目使用 hash 模式路由，并且部署在站点根目录，不需要 web.config 也能正常运行，只有 history 模式或子目录部署时才需要 web.config 做重写。
iis部署vue项目刷新404怎么解决最省事？
最省事的做法是在站点根目录放 web.config，使用 URL Rewrite 规则把非文件、非目录请求重写到 index.html，前提是服务器已安装 URL Rewrite 模块。
Windows Server 2019部署Vue项目需要额外付费吗？
不需要，IIS 是 Windows Server 自带功能，URL Rewrite 模块也可从微软官网免费下载,整个部署过程不涉及商业授权费用。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/670770.html
