需求：

1、項目完成了，但是還沒有與正式后臺連接（數據是本地json）
2、現有代碼上線IIS

?

準備工作

1、部署IIS服務器
2、項目執行build生成需要部署的文件

?

?

步驟一：復制文件

把build之后的文件（dist文件夾）拷貝到IIS存放網站文件的目錄

注意：
拷貝的時候不一定是要把dist整個文件夾拷貝，也可以拷貝里面的內容，這個需要看自己的需求。如果不明白的話，可以跟我一樣做。

?

步驟二：在IIS中新建站點

在"網站"執行鼠標右鍵，選擇添加網站。
網站名稱：按照用途或者項目起名即可
應用程序池：部署前端項目，這個可以忽略，任意選擇即可
內容目錄：網站存放的路徑，最好以英文命名
端口：web一般是80端口，不過我的80已經被其他項目占用，所以我設置為8082

?

步驟三：訪問網站

訪問網站可以在IIS界面右側直接瀏覽，具體見上圖，或者直接在瀏覽器地址欄輸入：http://localhost:8082/
很多網友的文章到此應該就結束了，他們大多都顯示成功截圖。 but，我這邊卻是一個接一個坑。
下面我就給大家分享一下我的填坑之旅 ?

?

步驟四：填坑

坑一、報錯：URL拼寫錯誤
打開網址發現頁面報錯，如下圖：

報錯內容：
見上圖顯示，提示URL拼寫錯誤。
我在路由中設置訪問"/"會重定向到"/brand/company"，所以上圖中訪問地址是正確的。

在IIS中開啟代理和設置URL重寫可以解決上訴問題。 具體如下 ?

步驟一：URL重寫

1、下載所需模塊：urlrewrite
傳送門：https://www.iis.net/downloads/microsoft/url-rewrite

2、設置規則
安裝好模塊之后，在IIS是圖界面會看到"URL 重寫"

雙擊之后，進入URL重寫界面，在右上角點擊"添加規則"，具體如下圖：

選擇"空白規則"，進入規則設置界面，具體見下圖：

注意：
名稱：名稱按功能命名即可
匹配URL：選擇使用正則表達式，然后模式根據請求的api來填寫，比如我請求的api地址全都是為'/api/---'，那我這里填寫^((?!(api)).)*$即可

手動展開"條件"選項，添加一個"條件"，選擇"不是文件"，具體見上圖

手動展開"操作"選項，設置"重寫URL"為"/index.html"，然后點擊右上角應用，重寫URL的規則就設置好了。

步驟二：代理設置

1、下載所需模塊
這里需要配置urlrewrite 和 Application Request Routing兩個模塊。urlrewrite 在步驟一種已經安裝過了，我們需要下載application request routing，傳送門：https://www.iis.net/downloads/microsoft/application-request-routing

2、開啟代理
按照好application request routing模塊之后再IIS功能視圖界面可以看到相關設置，具體見下圖：

雙擊進入設置界面，在右上角找到設置項目，點擊進入，具體見下圖：

Enable proxy 設置為"開啟"，在右側點擊"應用"即可，具體見下圖：

3、設置urlrewrite規則


名稱：根據功能命名即可
匹配URL：使用"通配符"；前端請求的地址是'/api/----'，所以模式設置"*api/*"
條件：不需要配置
操作：重寫URL，比如我請求的實際地址是'https://blog.csdn.net/write'，那我這里就填寫'https://blog.csdn.net/{R:2}'，具體跟實際情況填寫

另外，規則數目需要根據自己請求的api地址類型數目來設置

?

坑二：文字亂碼

經過上述配置之后，再次打開網址，已經可以正常訪問了，具體見下圖：

but，一坑剛平一坑又現，沒有辦法，開發的路上總是崎嶇坎坷，兄弟你要有一顆強大的心

解決方案：

在文件夾中，選擇index.html執行鼠標右鍵，選擇打開方式為"記事本"

之后進入記事本，不需要任何編輯，執行：文件> 另存為，編碼選擇"UTF-8"保存即可

回到瀏覽器刷新頁面，文本已經正常顯示了

?

坑三：頁面數據不顯示
從坑二的最后一張圖可以看到，頁面顯示空白，這是因為數據沒有請求到，具體是為啥呢？
這是前面項目中請求方式埋下的坑。

在代碼中改回真實的請求路勁即可

經過上述配置，vue項目真正成功的部署到IIS中了。

?

上文如有錯誤，請各位朋友指出，感謝。

總結

以上是生活随笔為你收集整理的全网最全教你轻松把vue项目部署到IIS服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。