IIS 釋出 Vue2 + Net Core
以下內容轉載自:https://blog.csdn.net/bigbear00007/article/details/90718450
準備工作
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中了。
————————————————
版權宣告:本文為CSDN博主「大雄Obear」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/bigbear00007/article/details/90718450
我的解決方式:
IIS安裝URL重寫,在釋出檔案的根路徑(dist)目錄下新增Web.config,省去上面所說的 設定urlrewrite規則
參照:https://router.vuejs.org/zh/guide/essentials/history-mode.html#internet-information-services-iis
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" 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="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
api 不需要開啟 代理,省去了上面的一步。
.net core api 部署遇到一個bug,主要是iis不支援Put 、Delete,通過修改 API 釋出目錄中的Web.config搞定
<?xml version="1.0" encoding="utf-8"?> <configuration> <location path="." inheritInChildApplications="false"> <system.webServer> <modules runAllManagedModulesForAllRequests="true"> <remove name="WebDAVModule" /> </modules> <handlers> <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" /> </handlers>
<!--下面參照自己的程式填寫 --> <aspNetCore processPath="dotnet" arguments=".\xxx.WebApi.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" /> </system.webServer> </location> </configuration> <!--ProjectGuid: B3F87C3B-1A0B-4AE8-8014-228DEB3BD444-->
解決辦法:
出現這個錯誤是因為 IIS 7 採用了更安全的 web.config 管理機制,預設情況下會鎖住配置項不允許更改。要取消鎖定可以以管理員身份執行命令列 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers 。其中的 handlers 是錯誤資訊中紅字顯示的節點名稱。
如果modules也被鎖定,可以執行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules
%windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules
注意:要以管理員身份執行才可以,預設不是管理員身份,方法,在開始選單中的搜尋程式與檔案輸入CMD,就會在上方出現一個CMD.EXE,在這個CMD.EXE檔案上點選鍵,選擇“以管理員身份執行”,開啟命令列視窗,輸入以上命令即可。
另外,如果使用Asp.net的朋友,在安裝IIS7的時候一定記得勾選Asp.net,預設不選,也會出現類似的錯誤資訊
不能在此路徑中使用此配置節。如果在父級別上鎖定了該節,便會出現這種情況 - 落晨予曦 - 部落格園 (cnblogs.com)
https://www.cnblogs.com/jxxy2012nw/p/5629225.html
關於net core 站點通過iis部署,Delete和Put請求被攔截報跨域錯誤的問題 - 鄭小超 - 部落格園 (cnblogs.com)
https://www.cnblogs.com/GreenLeaves/p/15503442.html