使用VS Code 調試Vue

1. 在VS Code擴展中下載對應瀏覽器的插件:Debugger for Chrome(谷歌瀏覽器) ;Debugger for Firefor(火狐瀏覽器);沒有瀏覽器的得先安裝對應的瀏覽器.

　　2.在 "調試" 菜單中選擇"打開配置"  會打開 launch.js 文件 添加以下配置.

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動程序",
            "program": "${workspaceFolder}\\dev"
        },
 { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] }, { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }
    ]
}

　　3.運行Vue項目.(npm run dev)

　　4.打開要調試的vue文件,選擇要使用的瀏覽器. 點擊開始調試 瀏覽器就會自動運行,輸入網頁地址就可以調試了.