天天看點

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

從.NET Core 1.0開始我們就将其應用到項目中,但是呢我對ASP.NET Core一些原理也還未開始研究,僅限于會用,不過園子中已有大量文章存在,借着有點空餘時間,我們來講講如何利用ASP.NET Core結合Vue在IIS上運作。

關于安裝Vue和Webpack則不再叙述,我們直接來建立ASP.NET Core應用程式或者通過dotnet new mvc建立ASP.NET Core應用程式

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

接下來在上述應用程式下通過如下指令建立Vue模闆

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

接下來我們利用npm run dev啟動Vue.

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

此時Vue也運作起來,我們則可以很嗨森的在本地進行測試了。完成了第一步,然後我們在生産環境實作前後分離,将上述ASP.NET Core應用程式部署到IIS作為一個單獨站點,與此同時将Vue也作為一個單獨站點。接下來我們将上述應用程式部署到IIS上。

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

在IIS上建立的站點aspnetcore,其基本設定中應用程式池當然為無托管代碼,如果沒有請自行下載下傳.NET Core run time。

運作Vue在ASP.NET Core應用程式并部署在IIS上前言
運作Vue在ASP.NET Core應用程式并部署在IIS上前言

此時我們需要做的則是修改Vue配置檔案,修改生成的Vue模闆項目config檔案夾下的Index.js檔案來配置生成檔案所在目錄,如下:

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

接下來再運作npm run build指令将在wwwroot檔案夾下生成vue檔案。

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

然後我們建立前端站點将上述生成的檔案放到該站點下,比如我建立的是VueDemo。

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

是不是一切看起來都是那麼簡單和easy呢,可能在你進行如上測試時會出現很多問題,我隻是未做詳細說明而已,比如沒有權限通路啊,那就給定權限諾,預設情況下站點權限為IIS APPPOOL\DefaultAppPool ,要是權限不夠就配置NET SERVICE或者EVERY ONE,再要麼是建立的Vue站點無法通路出現對應的錯誤代碼,此時需要通過Web平台安裝路由重寫程式。

運作Vue在ASP.NET Core應用程式并部署在IIS上前言

本節我們簡短介紹了如何實作ASP.NET Core應用程式與前端架構(如Vue)前後分離,上述完成後接下來則是Vue進行接口調用了,有時間會更新利用Vue進行Ajax請求ASP.NET Core接口,如果上述建立過程中出現任何坑而無法解決可直接私信我,一一為你解答。see u。

本文轉自Jeffcky部落格園部落格,原文連結:http://www.cnblogs.com/CreateMyself/p/7643014.html,如需轉載請自行聯系原作者

繼續閱讀