前言

默認(rèn)情況下，Visual Studio提供了“基于Vue.js Web 應(yīng)用程序”項(xiàng)目模板，可以生成Vue.js前端項(xiàng)目。

你需要另外創(chuàng)建Web API項(xiàng)目，調(diào)試時(shí)需要同時(shí)啟動(dòng)2個(gè)項(xiàng)目，然后還要解決前后端集成帶來的問題，比如跨域訪問。

如果，能將前后端集成到一個(gè)項(xiàng)目就好了！

項(xiàng)目模板

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

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

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

項(xiàng)目結(jié)構(gòu)

創(chuàng)建新項(xiàng)目，項(xiàng)目結(jié)構(gòu)如下：

ClientApp目錄下放置的就是Vue.js客戶端代碼，其他內(nèi)容和普通WebAPI項(xiàng)目相同。

運(yùn)行項(xiàng)目

無需配置，你可以直接運(yùn)行它，它會(huì)自動(dòng)運(yùn)行npm install安裝完所有npm包：

如果應(yīng)用程序啟動(dòng)正常，將顯示前端頁(yè)面，訪問FetchData頁(yè)面，可以看到調(diào)用的是相同端口下的后端API：

發(fā)布項(xiàng)目

注意，模板代碼有錯(cuò)誤，設(shè)置的configuration.RootPath不對(duì)。

發(fā)布前需要修改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";}}); }

執(zhí)行發(fā)布操作，它會(huì)自動(dòng)執(zhí)行npm run build,將前端代碼編譯輸出到ClientApp/dist目錄下，發(fā)布目錄結(jié)構(gòu)如下：

運(yùn)行程序，訪問FetchData頁(yè)面，可以看到調(diào)用的還是相同端口下的后端API：

結(jié)論

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

如果你覺得這篇文章對(duì)你有所啟發(fā)，請(qǐng)關(guān)注我的個(gè)人公眾號(hào)”My IO“

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。