引言

應用主流的前端開發工具Vue和后端開發工具微軟Visual Studio 2019，進行前后端聯合調試，不適為中小型應用的一種常用簡便調試方法，現介紹如下。

Vue

讀音/vju?/，類似view,是一套用于構建用戶界面的漸進式JAVAScript框架。Vue自底向上逐層應用，只關注視圖層，易于上手，與第三方庫或既有項目整合，開發復雜的單頁應用SPA。

Vue是目前最流行的前端框架之一，axIOS是Vue中用來與后端交互的工具（類似ajax）。通過axios可以向服務器發送索要數據請求，服務器接收到請求后即會將數據返回給前臺。

使用vue前端項目開發(默認前后端分離)，vue-cli腳手架run server，nodejs會啟動一個web site，此web site基于node.js實現，如果后端使用java、c#等實現的，此時如何請求后端的數據并進行項目測試？

深入vue-cli腳手架發現，cli腳手架啟動的web site默認開啟代理功能，可通過設置相關代理信息將請求轉發到對應的后端應用程序。

Visual Studio微軟集成開發環境

流行的windows平臺應用程序集成開發環境，最新版為 Visual Studio 2019基于.NET Framework 4.8 。

調試步驟主要分三步，即先運行vue環境，再進入后端調試環境，第三步是在瀏覽器中打開網址進行聯調。

1、啟動vue-cli

按 win+r，輸入cmd回車，進入command命令行環境; 進入項目目錄，輸入npm run dev回車，啟動vue-cli

下圖是啟動完成之后的內容

2、 啟動Visual Studio，進入調試狀態

3、打開chrome瀏覽器運行

瀏覽器地址欄粘貼鏈接http://localhost:8080進入前端程序主界面，就可以進行調試狀態；

相關調試按鈕如下圖所示：