何為混合發布呢?
混合發布的意思就是在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后台路由