.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的重定向，有跟好的忽略方式請聯系我 [e-mail]）.由於這里的后端接口都是 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>