前言

默認情況下，Visual Studio提供了“基于Vue.js Web 應用程序”項目模板，可以生成Vue.js前端項目。

你需要另外創建Web API項目，調試時需要同時啟動2個項目，然后還要解決前后端集成帶來的問題，比如跨域訪問。

如果，能將前后端集成到一個項目就好了！

項目模板

利用“Vue JS 3.0 with .NET 5 Web API”項目模板，我們很容易創建Vue.js+Web API前后端集成項目。

首先，安裝“Vue JS 3.0 with .NET 5 Web API”擴展：

安裝成功后，在創建新項目窗口可以可以看到，多了“Vue JS 3.0 with .NET 5”項目模板：

項目結構

創建新項目，項目結構如下：

ClientApp目錄下放置的就是Vue.js客戶端代碼，其他內容和普通WebAPI項目相同。

運行項目

無需配置，你可以直接運行它，它會自動運行npm install安裝完所有npm包：

如果應用程序啟動正常，將顯示前端頁面，訪問FetchData頁面，可以看到調用的是相同端口下的后端API：

發布項目

注意，模板代碼有錯誤，設置的configuration.RootPath不對。

發布前需要修改Startup.cs，代碼如下：

public?Startup(IConfiguration?configuration,?IWebHostEnvironment?env) {Configuration?=?configuration;CurrentEnvironment?=?env; }public?IConfiguration?Configuration?{?get;?} private?IWebHostEnvironment?CurrentEnvironment?{?get;?set;?}//?This?method?gets?called?by?the?runtime.?Use?this?method?to?add?services?to?the?container. public?void?ConfigureServices(IServiceCollection?services) {services.AddControllers();services.AddSpaStaticFiles(configuration?=>{if?(CurrentEnvironment.IsDevelopment()){configuration.RootPath?=?"ClientApp";}else{configuration.RootPath?=?"ClientApp/dist";}}); }

執行發布操作，它會自動執行npm run build,將前端代碼編譯輸出到ClientApp/dist目錄下，發布目錄結構如下：

運行程序，訪問FetchData頁面，可以看到調用的還是相同端口下的后端API：

結論

使用“Vue JS 3.0 with .NET 5 Web API”項目模板，再也不怕怎么創建前后端集成項目了！

如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“

總結

以上是生活随笔為你收集整理的一键生成Vue.js + Web API前后端集成项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。