使用 VS Code 调试 Vue.js 项目

Vite

如果是通过 create-vue 创建的项目，则修改 vite.config.ts 配置文件，在开发环境生成 sourcemap 文件。

export default defineConfig({
  build: {
    sourcemap: true,
  },
  // other configs...
});

更多配置，请参考：https://vitejs.dev/config/build-options.html#build-sourcemap

Vue Cli

如果是通过 vue-cli 创建的项目，则修改 vue.config.js 配置文件，在开发环境生成 sourcemap 文件。

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  }
  // other configs...
};

更多配置，请参考：https://cli.vuejs.org/guide/webpack.html
Webpack
如果是自己搭建的项目，则修改自己定义的 webpack 配置文件，在开发环境生成 sourcemap 文件。

module.exports = {
  devtool: "source-map",
  // other configs...
};

更多配置，请参考：https://webpack.js.org/configuration/devtool/#devtool

配置文件launch.json

通过如下步骤，创建 launch.json 配置文件（如果你的项目中已经存在该文件，则可跳过此步骤）

选择左侧菜单中的 Debug icon，打开调试菜单。
点击 create a launch.json file，创建一个新的配置文件。
选择 Web App（Edge），当然，你也可以选择 Web App（Chrome）
生成的 launch.json 文件大致长这样（不同版本的 VS Code 可能略有不同）：

{
    // 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": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

将生成的 launch.json 文件内容，替换为下方配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      // 使用 Edge 浏览器调试
      "type": "msedge",
      // 使用 Chrome 浏览器调试
      // "type": "chrome",

      "request": "launch",
      "name": "vuejs: msedge",

      // 项目的访问地址（需要改成你项目开发环境对应的地址和端口号）
      "url": "http://localhost:5173",

      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },

      // 设置进入 debug 环境之前需要执行的任务。
      // 此名称对应项目中 .vscode 目录下 tasks.json 文件中的 label 属性）
      "preLaunchTask": "vuejs: start"
    }
  ]
}

上面的配置中，有以下几点需要注意：

type：VS Code 的 Debug 类型。

msedge 的意思是使用 Edge 浏览器进行调试。
chrome 的意思是使用 Chrome 浏览器进行调试。
url：浏览器启动时访问的地址。

需要改为你项目的开发环境地址，如果一致则无需修改。
preLaunchTask：设置进入 debug 环境之前需要执行的任务。

此名称对应项目中 .vscode 目录下 tasks.json 文件中的 label 属性。
tasks.json 文件下面会创建。

更多信息：

关于 launch.json 文件的更多配置，请参考：

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes
tasks.json
在项目的 .vscode 目录创建 tasks.json 文件，然后将下方内容粘贴进去：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "vuejs: start",
      "type": "npm",
      // 需要执行的命令（对应于 package.json 中的 scripts 命令）
      "script": "dev",
      "isBackground": true
    }
  ]
}

上面的配置在执行时，运行的命令是：npm run dev，如果你的项目是其他的启动命令，那么修改为对应的 script 名称即可。

• 注意：type 的其他可选值是 shell 或者 process，可不要傻乎乎的改成 yarn。

• type：任务的类型。对于自定义任务，可以设置为 shell 或 process。

• 如果设置为 shell，则该命令将被解释为 shell 命令（例如：bash、cmd 或 PowerShell）。

• 如果设置为 process，则该命令将被解释为要执行的进程。
  更多信息：

关于 tasks.json 文件的更多配置，请参考：

https://code.visualstudio.com/docs/editor/tasks#_custom-tasks
https://code.visualstudio.com/docs/editor/tasks-appendix
关于 VS Code tasks 功能，更多信息，请参考：

https://code.visualstudio.com/docs/editor/tasks

打断点

本文转载自https://segmentfault.com/a/1190000042460617