【實戰教學】在 Windows 11 的 IIS 部署 Vue.js 專案

 

前言

  在公司或政府／企業環境中，後端系統大量使用 Windows Server + IIS，但前端卻逐漸改用 Vue / React 這類 SPA 框架。

很多人第一個疑問就是：

Vue.js 不是要用 Node.js 嗎？
那 IIS 要怎麼部署？

這篇文章會用 最實際、最常見的情境，一步一步帶你完成：

在 Windows 11 的 IIS 上部署 Vue.js 專案（不需要 Node.js）

一、部署觀念先釐清（非常重要）

✔️ Vue 部署到 IIS 的核心觀念

• IIS 不會執行 Vue

• IIS 不需要 Node.js

• IIS 只負責提供「靜態檔案」

👉 Vue 真正部署的只有 build 後的結果

Vue 原始碼
   ↓
npm run build
   ↓
dist/
   ↓ 

IIS 指向 dist

二、準備環境

作業系統

• Windows 11（Windows Server 流程相同）

必要工具

• Node.js（只在 build 時使用）

• IIS（內建於 Windows）

三、建立 Vue 專案（範例）

1️⃣ 建立 Vue 3 專案

npm create vue@latest

建議選項：

• TypeScript：No

• Router：Yes（SPA 必備）

• 其他：No

cd vue-iis-demo
npm install
npm run dev

確認瀏覽器可正常顯示開發畫面。

四、Build 專案（產出部署檔案）

在專案根目錄執行：

npm run build

成功後會產生 dist 資料夾，結構如下：

dist/
├── index.html
├── assets/
│   ├── index-xxxx.js
│   └── index-xxxx.css

⚠️ 這個 dist 才是要交給 IIS 的內容

五、IIS 建立 Vue 網站

1️⃣ 複製檔案

將 dist 裡的所有檔案，複製到：

C:\inetpub\vue-iis-demo\

最終結構應為：

C:\inetpub\vue-iis-demo\
├── index.html
├── assets\
├── favicon.ico（可選）

---

2️⃣ 建立 IIS 網站

• 開啟 IIS 管理員

• 新增網站

  • 網站名稱：VueIISDemo

  • 實體路徑：C:\inetpub\vue-iis-demo

  • 連接埠：80

瀏覽器測試：

http://localhost

此時首頁應可正常顯示。

六、解決 SPA 重新整理 404（關鍵步驟）

問題現象

• 首頁正常

• 點 /about 頁面

• 按 F5 → IIS 404

原因

IIS 不知道 Vue Router 的路由規則。

---

解法：加入 web.config（Rewrite）

在網站根目錄新增 web.config：

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

---

七、常見錯誤：HTTP 500.19（一定會遇到）

錯誤畫面

HTTP 錯誤 500.19 - Internal Server Error
錯誤碼：0x8007000d

原因

IIS 尚未安裝 URL Rewrite Module

---

解法：安裝 URL Rewrite Module

只能從 Microsoft 官方下載：

👉 https://www.iis.net/downloads/microsoft/url-rewrite

安裝完成後：

iisreset

重新測試網站即可正常運作。

---

八、部署完成後的標準結構

C:\inetpub\vue-iis-demo\
├── index.html
├── assets\
│   ├── index-xxxx.js
│   └── index-xxxx.css
├── favicon.ico
└── web.config

❌ 不應出現：

• src/

• node_modules/

• package.json