透過 webpack 打包後的檔案為靜態頁面，所以只要能通過 HTTP 訪問到該頁面就夠，其中唯一可能發生問題的就是路徑問題，這牽涉到 webpack 的設定需要與其搭配；另外當 Router 是使用 History 模式時，就需要透過 web server 設定來執行 url rewrite 機制，確保訪問到正確的檔案。
前言
透過 webpack 打包後的檔案為靜態頁面，所以在佈署上應該相較以 ASP.NET 開發的網站還簡單許多，因為只要能夠訪問到該靜態頁面就搞定了，BUT 還是有兩個佈署重點需要注意，以下參考。
當佈署至虛擬目錄
當佈署站台至 demo 這個虛擬目錄之下，此時就必須透過 webpack 設定這個 demo 路徑，在打包過程中讓所產出的資源路徑都補上 /demo/ 目錄，這樣才能正確地獲得資源檔。
針對程式需要調整的項目如下：
- webpack 設定檔 output 的 publicPath 路徑設定
可調整參數檔 assetsPublicPath 變數為/demo/
- vue router 中的 base 路徑
/demo/ 路徑實在是不大好，因此可以參考筆者「各環境組態切分技巧」文章，透過 build script 將這個路徑資料傳入，並且同步設定這兩個位置的參數。
當 Router 為 History 模式
在 vue router 中可以指定使用 hash 或 history 兩種模式，在 hash 模式下僅匹配 # 前的 URL，但在 history 模式下訪問站台頁面時，會依據完整 URL 在伺服端找尋匹配的檔案頁面。
- hash mode : http://192.168.9.79/demo/#/public/login
- history mode : http://192.168.9.79/demo/public/login
在單頁式應用程式 (SPA) 中，那些路徑下當然不會有檔案存在，因此需透過 URL Rewrite 機制在匹配不到任何靜態資源時，指向這個單頁應用程式依賴的 index.html 頁面上來回應這個訪問。以 IIS 為例，具體設置如下。
佈署至虛擬目錄
新增虛擬目錄 demo 來對應到特定資料夾中，而資料夾內直接擺放 webpack 打包出的檔案。
直接訪問根目錄可以正確顯示畫面
直接訪問特定頁面
當直接訪問 router 中的特定頁面，不易外地就會直接賞你個 404 ，原因就如先前提到的，透過這個 URL 向服務端取得資源時，並無與 /devTools/langmaker/ 匹配的檔案存在，因此回應找不到檔案。
設定 URL Rewrite 規則
首先確認 IIS 有無安裝 URL Rewrite 模組，如果沒有請至官網下載安裝。
安裝完畢會出現 URL Rewrite 圖示，選擇 demo 虛擬目錄後點選 URL Rewrite 進行設定。
點選新增規則
使用空白規則來修改
設定所有進入這站台的訪問都套用此 URL Rewrite 規則
加入 Request is not a file 條件，表示當 URL 指到檔案類資源時不套用此 URL Rewrit 機制。
當符合上述各條件時，直接指到 /demo/ 虛擬目錄上
此時再度訪問 /demo/devTools/langmaker 時，已經可以經由 URL Rewrite 機制指向這個 SPA 所依賴的 /demo/index.html 中，再透過 vue router 機制 mapping url 至特定頁面組件來呈現畫面。
參考資訊
vue-router 的 hash 模式与 history 模式
希望此篇文章可以幫助到需要的人
若內容有誤或有其他建議請不吝留言給筆者喔 !
