Question

我有以下问题。我想使用VS Code和Chrome调试我的Vue.js项目。因此，我遵循网站Guide上的官方指南，但无效。问题是我总是会收到错误：

 unverified breakpoint

我怎么了？

这是我的vue.config.js

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

这是我的调试指导：

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "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:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://app/*": "${webRoot}/*"
            }
        }
    ]
}

这是我的package.json

    "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

当我尝试npm run serve时，我收到错误消息unverified breakpoint，并且断点永远不会被击中。

我使用vue-cli 3生成项目。

有人可以帮我吗？

更新

路径可能有问题。因为当我在VS Code中的调试器控制台中运行.scripts时，会得到这样的路径

(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)

但是没有文件夹webpack:。但是我不知道他为什么要考虑有一个文件夹。他在每个文件中都做这个。

在我的tsconfig.js中，我已经有"sourceMap": true。

更新2

当我选中All Exceptions复选框时，VS Code向我显示了我的应用程序中的所有异常（它们被捕获）。但是我的断点仍然不起作用。

更新3

我的项目看起来像这样

C:\Users\User\Desktop\Vue\route-app
|
-----.vscode
     |
     -----launch.json
|
-----node_modules
     |
     ----- modules etc.
|
-----public
     |
     ----- index.html
     |
     ----- manifest.json
     |
     ----- favicon.ico
|
-----src
     |
     ----- components
           |
           ----- all my components.vue files
     |
     ----- views
           |
           ----- all my views.vue files (this files are for routing)
     |
     ----- App.vue
     |
     ----- main.ts
     |
     ----- registerServiceWorker.ts
     |
     ----- router.ts
     |
     ----- shims-tsx.d.ts
     |
     ----- shims-vue.d.ts
     |
     ----- store.ts
|
-----.postcssrc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js

Answer 1

此调试适配器的语法与Chrome调试适配器的语法不同：请删除网址和路径末尾的*：

"webpack:///src/": "${webRoot}/"

Answer 2

对我来说，我的webroot文件夹设置不正确。

我的Vue文件浏览器设置为：

D:\Workspace

项目在该文件夹中为

D:\Workspace\vue_project1

launch.json中的webroot设置必须更改为：

"webRoot": "${workspaceFolder}/vue_project1"

Answer 3

config vue.config.js（如果不存在，请创建一个）

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

config babel.config.js

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

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

参考上述配置后，我可以正常调试.vue和.js文件。（vue-cli3 + vscode）

使用VS Code调试Vue.js应用。错误未验证的断点

3 个答案: