关于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，你的断点当初应该被命中了