前言

上次發表了《一鍵生成Vue.js + Web API前后端集成項目》后，有多位網友來問，有不有其他的前后端集成模板：

實際上，VS2022沒有提供前后端集成項目模板。

但是，使用VS2022，同樣可以輕松實現React/Angular/Vue.js + Web API前后端集成。

實現方式

1.創建前端項目

打開VS2022， 在新建項目窗口搜索"Standalone"，可以看到React/Angular/Vue.js的項目模板，并可選擇使用JS還是TS：

下面還是以Vue.js為例講解，其他前端框架同樣操作。

選擇“Standalone TypeScript Vue Template”，在“其他信息”窗口，一定要記住勾選Add integration for Empty ASP.NET Web API Project:?

點擊“創建”按鈕后，會自動執行vue CLI下載相關依賴：?

創建完成后，你會發現只有前端項目。后端在哪？

2.添加后端項目

在解決方案資源管理器，右鍵點擊解決方案名稱，選擇"添加"->"新建項目"，選擇“ASP.NET Core Web API”，按照正常方式創建Web API項目。

OK，前后端項目已經創建完成了，項目結構如下：

但是，想要能夠實現集成調試，我們還需要進行如下操作。

3.調試

打開WebApplication1項目Properties目錄下的launchSettings.json文件，找到API啟動地址：

然后，打開vueproject1項目的vue.config.js，修改proxy為對應地址：

接著，右鍵點擊解決方案名稱，選擇"屬性"，修改為多個啟動項目：

最后，F5啟動解決方案，可以看到訪問了正確的后端服務：

但是，別高興太早，雖然調試成功了，要想部署成前后端集成項目，我們還要做點工作。

4.部署

打開vueproject1項目的vue.config.js，修改module.exports，增加outputDir，值為"../WebApplication1/wwwroot"：

它的作用，是將前端部署文件輸出到Web API指定目錄。

然后，修改WebApplication1項目的Program.cs，加入如下代碼：

app.UseDefaultFiles(); app.UseStaticFiles();

它的作用，是啟用靜態文件服務，由Web API承載前端文件顯示。

最后，修改WebApplication1.csproj文件，增加如下內容：

<Target?Name="PublishRunWebpack"?AfterTargets="ComputeFilesToPublish"><Exec?WorkingDirectory="$(ProjectDir)\..\vueproject1"?Command="npm?run?build?--?--prod"?/><ItemGroup><DistFiles?Include="wwwroot\**"?/><ResolvedFileToPublish?Include="@(DistFiles->'%(FullPath)')"?Exclude="@(ResolvedFileToPublish)"><RelativePath>%(DistFiles.Identity)</RelativePath><CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory></ResolvedFileToPublish></ItemGroup> </Target>

它的作用，是發布Web API時自動編譯前端項目，并將wwwroot所有文件復制到發布目錄下。

現在，就是見證奇跡的時刻。

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

運行WebApplication1.exe，訪問http://localhost:5000，可以看到調用的還是相同端口下的后端API：

結論

雖然VS2022沒有提供前后端集成項目模板，但是，經過我們的改造，同樣可以輕松實現React/Angular/Vue.js + Web API前后端集成。

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

總結

以上是生活随笔為你收集整理的解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目的全部內容，希望文章能夠幫你解決所遇到的問題。

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