关于vue.js:在VS-Code-中调试Vuejs

步骤

• 关上 vscode，装置 Debugger for Chrome
• 应用 vue cli3 创立 vue 利用
• 我的项目根门路增加 ”vue.config.js” 文件

module.exports = {
    configureWebpack: {devtool: 'source-map'}
}

• .vscode 文件中的 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}/*"
            }
        }
    ]
}

• 设置一个断点
• 在根目录关上你习用的终端并应用 Vue CLI 开启这个利用：
  npm run serve
• 来到 Debug 视图，抉择 “vuejs：chrome/firefox” 配置，而后按 F5 或点击那个绿色的 play 按钮。

• 随着一个新的浏览器实例关上 http://localhost:8080，你的断点当初应该被命中了