【IIS】WebApi和Vue混合發布


何為混合發布呢?

  混合發布的意思就是在webapi的主文件夾下,放置vue網站目錄   讓vue和webapi使用同一個端口號進行訪問

  比如:原來的webapi地址為:https://47.96.66.32:1234/Webapi/         Vue再發布一個地址是:https://47.96.66.32:1235/

       混合后Vue的地址是:https://47.96.66.32:1235/   Webapi地址也是:https://47.96.66.32:1235/Webapi/

 

具體實現:

  a、修改WebApi目錄下的頁面結構,下圖應該都不陌生。里面記錄了網站入口及模板文件

  

 

 

         b、我們要做的就是把Vue的index.html文件及靜態資源文件拷貝到這里,然后修改默認的index.cshtml文件,讓index.cshtml文件的內容變為Vue的Index.html文件內容即可

  然后把static文件夾放置到相同路徑下,如圖:  (圖中index.cshtml實際上就是Vue的index.html文件,只要簡單修改文件后綴讓.net能識別到文件即可)

  

 

 

  

 

 

 

 

 

   c、把_Layout.cshtml文件修改一下,去掉默認的界面布局

  

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
        @RenderBody()
</body>
</html>

 

       d、然后運行頁面,此時頁面找不到資源   .......css類似的錯誤。根據提示可以看到資源文件是默認在網站根目錄加載的,所以把static靜態文件拷貝到webapi根目錄下

  

 

 

   此時再運行就OK了,而且這樣也能保證webapi的訪問。

  e、最后提一個Vue圖標問題,也是因為路徑導致Vue網站里的小圖標無法訪問,可根據提示將ttf、woff資源文件拷貝到對應目錄即可。

      最終就是將fonts文件夾在css文件夾下創建static文件夾,然后把fonts文件夾放進去就可以了

      

 

 

后續碰到的問題:

     由於Vue前端注釋掉了頁面地址中默認的#號,導致類似 xxxxx/stuList頁面刷新時觸發了MVC路由機制

     頁面就看不到了,提示找不到對應的Controller

     

 

 

 

     解決的方法:

           恢復Vue頁面中的#號,防止觸發MVC后台路由

 

 

 

 

      

      

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM