.netCore + vue（history模式） 項目整合 在IIS上的部署（無需代理）

 

　　最近剛開始學習 .netcore 和Vue前後端完全分離的開發模式，開發過程中使用了devServer代理到本地的調試路徑。而發佈到生產環境後由於 vue 的機制所有頁面都是重定向到index頁面進行處理的，然而vue 路由的hash模式實在是齣戲，最終還是堅持使用 history 的路由方式。下面是部署到IIS環境的方法

　　一、環境

　　　　服務器：window server2012 R2,IIS10

　　　　後端：mysql+.netcore webapi+jwt+swgger..

　　　　前端：vue框架 ant-design-vue-pro

　　二、部署core

　　　　這裏就不在多講，core 的部署比較簡單。網上很多教程，注意在代碼中開啓靜態文件訪問 app.UseStaticFiles();

　　三、部署Vue項目

　　　　vue項目 build 出來後 放到 webapi 接口項目的 wwwroot 下面

　　　　1.下載安裝  web 平臺安裝程序 並在裏面搜索安裝 安裝iis urlRewite2.0（爲了使vue能夠重定向到 index.html）

　　　　　　安裝完 web平臺安裝程序後 

　　　　　

 

 　　　　　　搜索並用 管理員身份 打開web 平臺安裝程序，安裝 url rewrite

　　　　　　

 

 

 　　　　　

 

 

 

 　　　　　　安裝完畢後，我們在對應網站 功能視圖 打開url重寫 ，按以下步驟操作

　　　　　　

 

 

 　

　　　　　　　　

 

 

　　　　　　　　　　

 

 

 　　2.添加 API 請求的過濾規則，（在添加重定向到index的規則前首先先對api 等一些接口url的重寫，其實這裏就是忽略掉api的重定向，有跟好的忽略方式請聯繫我 [email protected]）.由於這裏的後端接口都是 http://域名/api/--- 的方式，所以這裏直接忽略掉api開頭的所有規則，注意圖二的停止後續處理

 

 

 

 

 

 不懂[R:N}什麼意思的，可以看 這裏 

 

 

3.然後我們添加重定向 到index

 

 index 規則添加，這裏我們同樣屏蔽掉api相關的  ^(?![api]).*$

 繼續往下 添加 規則條件 ，

 

 添加 條件

 

 

 

 

 

 

 最後一個是爲了保險排除所有 .** 文件類  .*\.[\d\w]+$

然後點擊應用

網站就能正常跑起來了，同時解決了 刷新後 404的問題

 應用後 web.config會生成 rewrite的 節點，注意備份。後面可以直接通過更改 web.config的方法修改，而不用去iis管理界面修改

<rewrite>
<rules>
<rule name="api" patternSyntax="Wildcard" stopProcessing="true">
<match url="*api/*" />
<action type="Rewrite" url="/api/{R:2}" />
</rule>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="^(?![api]).*$" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>