需求：

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

?

準備工作

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

?

?

步驟一：復制文件

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

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

?

步驟二：在IIS中新建站點

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

?

步驟三：訪問網(wǎng)站

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

?

步驟四：填坑

坑一、報錯：URL拼寫錯誤
打開網(wǎng)址發(fā)現(xiàn)頁面報錯，如下圖：

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

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

步驟一：URL重寫

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

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

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

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

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

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

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

步驟二：代理設置

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

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

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

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

3、設置urlrewrite規(guī)則


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

另外，規(guī)則數(shù)目需要根據(jù)自己請求的api地址類型數(shù)目來設置

?

坑二：文字亂碼

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

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

解決方案：

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

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

回到瀏覽器刷新頁面，文本已經(jīng)正常顯示了

?

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

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

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

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。