使用vue-cli構建的項目如何調試？如何與服務端結合？

從兩方面說起：

（1）斷點調試，我想每個開發者對斷點調試都是有需求的。

因為vue-cli 採用的是webpack進行構建的，所以如果要進行斷點調試的話，請設置devtool為source-map。

具體做法是：到/build目錄下的webpack.dev.config.js 搜索devtool，將其設置為source-map

配置截圖如下：

完成配置後，跑node服務npm run dev ，然後就可以在chrome瀏覽器中進入開發者模式。搜索具體的vue組件進行斷點調試。調試效果如下：

（2）vue狀態管理調試，vue-devtool

這是一個類似react中redux-devtools的工具，安裝此工具後，可以看到整個應用的state的值，方便對應用的狀態進行調試。

具體做法是：到chrome應用商店，

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

進行安裝chrome擴展工具。安裝完成後重啟chrome，然後進入chrome的調試狀態，就可以看到多了個調試tab。效果如下

大概就這兩種調試方式吧！