从 Visual Studio Code 调试 vue

本文介绍了从 Visual Studio Code 调试 vue-cli 3 生成的应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我使用 vue-cli 3.0.0-rc.3 生成了一个应用

I generated an app using vue-cli 3.0.0-rc.3

现在我想使用 Visual Studio Code(Chrome 调试器)调试它，但是我似乎找不到打开 sourceMaps 的选项.

Now I want to debug it using Visual Studio Code (Debugger for Chrome) however I can't seem to find the option to turn on sourceMaps.

我在 VSCode 中设置了断点，但没有命中.如果我在 vue.config.js 中指定:sourceMaps: true"，我会收到错误vue.config.js 中的选项无效:不允许使用sourceMaps""

I set the breakpoint in VSCode but it is not hit. If I specify: "sourceMaps: true" in vue.config.js, I got an error "Invalid options in vue.config.js: "sourceMaps" is not allowed"

需要设置什么选项才能调试工作?

What option needs to be set for debugging to work?

推荐答案

根据 官方食谱需要完成以下步骤:

According to the Official cookbook these steps needs to be done:

vue.config.js 文件必须编辑并添加:

vue.config.js file has to be edited and add:

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

然后launch.json应该是这样的:

then launch.json should look like this:

{
  "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}/*"
      }
    }
  ]
}

执行这些步骤后，断点开始按预期工作.

After these steps breakpoints started to work as expected.

这篇关于从 Visual Studio Code 调试 vue-cli 3 生成的应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！