VS code中斷點除錯Vue CLI 3專案

動機

當我發現按照vue的官網教程 cn.vuejs.org/v2/cookbook… 無法實現vue在VS code中的斷點除錯。

親測有效的方法

• 準備工作

vscode和chrome更新到最新版，vscode中安裝Debugger for Chrome外掛

• 配置vue.config.js檔案(如果沒有，在根目錄下新增一個)

module.exports = {
	configureWebpack: {
		devtool: 'source-map'
	}
};
複製程式碼

• 配置babel.config.js 檔案

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

複製程式碼

• 配置launch.json檔案

  

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        },
    ]
}
複製程式碼

• 啟動專案 npm run serve
• F5開啟除錯

  

---

最後感謝閱讀，致謝！