VScode調試Vue-element-admin、Vue項目

第一步：擴充 中輸入 Debugger for Chrome 安裝該擴充；

第二步：建立 launch.json 檔案，選擇 Chrome 後 把原有的内容替換 為以下内容，一個是谷歌浏覽器、一個火狐浏覽器的配置，記住把 url 的端口号改為本地開發的端口号；

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8090",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://localhost:8090",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [{
                "url": "webpack:///src/",
                "path": "${webRoot}/"
            }]
        }
    ]
}
           

第三步：找到項目 vue.config.js 中的 configureWebpack 添加 devtool: ‘source-map’；

第四步：按照開發習慣啟動項目終端啟動 npm run dev 或 打開 npm 腳本 快速啟動；

最後：運作和調試 按操作啟動即可；