1. 程式人生 > 其它 >IIS 釋出 Vue2 + Net Core

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