如何使用 SourceMaps（使用 Vue CLI 和 Webpack）通过 VS Code 和 Chrome 调试 VueJS 3 Typescript 项目？

Question

Tl;dr
VS Code 调试器总是说，Unbound breakpoint但在 chrome 开发工具中设置断点可以工作，并自动在 VS Code 中打开相关文件（之后该文件的 VS Code 调试器可以工作）。Chrome 中的源（地图）文件也有奇怪的名称，例如HelloWorld.vue?4a7c.

我使用 Typescript 设置了一个新的 VueJS 3 项目vue create my_project。我选择了 Typescript、Babel 和 Vue 版本 3。

我正在尝试启动并运行 VS Code 调试器来调试我的项目，就像我在 Java 等其他项目中使用的方式一样。因此，我从 VS Code 配方方面复制了最佳实践。（由于没有 VueJS Typescript 调试配方，我使用了 VueJS 和 Typescript 的调试配方并尝试将它们混合）

实际问题是，当我在 VS Code 中设置断点时，它显示Unbound breakpoint. 我的假设是 VS Code 无法将任何源映射文件映射到我的源文件，这表明 webpack 以某种方式弄乱了文件命名或者我的文件映射配置错误。

到目前为止，我所做的工作是，当我使用 chrome 开发人员工具检查项目时，我会看到一个main.ts可以设置断点的位置，一旦断点被​​击中，文件就会在 VS Code 中打开，并且调试器（至少对于这个特定文件）可以工作正如预期的那样。当涉及到.vue文件时，事情就有点混乱了。在 chrome 中，.vue文件被混淆/编译，但有一些文件以以下方式命名[file-name].vue?[4-digit-hex-value]（例如HelloWorld.vue?4a7c），其中包含实际源代码并在其中设置断点，并且该文件将在 VS Code 中自动打开。

如果有人可以提供适用于他们的设置的配置，那将对我有很大帮助。

到目前为止我有以下配置文件：

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "pathMapping": {
              "/_karma_webpack_": "${workspaceFolder}"
            },
            "sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*",
                "/./*": "${webRoot}/*",
                "/src/*": "${webRoot}/*",
                "/*": "*",
                "/./~/*": "${webRoot}/node_modules/*"
            },
            "preLaunchTask": "serve"
        }
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "problemMatcher": [{
                "base": "$tsc-watch",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Starting development server",
                    "endsPattern": "Compiled successfully"
                }
            }],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

（npm serve只执行package.json定义的脚本"serve": "vue-cli-service serve"）

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

Answer 1

我现在要采用的解决方案如下：

\n

（我不知道幕后发生了什么，但不知何故它有效 - 真的不知道生成或不生成什么源映射）

\n

我只是使用官方 VS Code 附加 Chrome 调试设置，并添加了一个预启动任务来启动在开发模式下为应用程序提供服务的开发人员服务器。不知何故，这就是使用功能齐全的 VS Code 调试器和 VueJS 3 Typescript 应用程序（实际上还安装了 Tailwind）所需的全部内容。

\n

launch.json

\n

{\n    "version": "0.2.0",\n    "configurations": [\n        {\n            "type": "pwa-chrome",\n            "request": "launch",\n            "name": "My VueJS Chrome",\n            "url": "http://localhost:8080",\n            "webRoot": "${workspaceFolder}",\n            "preLaunchTask": "serve",\n            // "userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir" \n            // This config is to always use the same configuration for the chrome app (system wide) \n            // therefore you can install the prefered extensions once and they will stay!\n            // Taken from here: https://stackoverflow.com/questions/51725854/run-vscode-chrome-debugger-with-its-extensions\n        }\n    ]\n}\n

\n

tasks.json（这是官方的 VueJS VS Code 预启动任务配方）

\n

{\n    "version": "2.0.0",\n    "tasks": [\n        {\n            "label": "serve",\n            "type": "npm",\n            "script": "serve",\n            "isBackground": true,\n            "problemMatcher": [{\n                "base": "$tsc-watch",\n                "background": {\n                    "activeOnStart": true,\n                    "beginsPattern": "Starting development server",\n                    "endsPattern": "Compiled successfully"\n                }\n            }],\n            "group": {\n                "kind": "build",\n                "isDefault": true\n            }\n        }\n    ]\n}\n

\n

只需将这两个文件放入.vscode项目根目录中即可开始！

\n

离题（安装 tailwindcss）：

\n

\n

使用这里的官方设置指南- 只是调整为使用 vue cli create 而不是 vite。

\n

\n

1. 安装 tailwindcss、postcss 和 autoprefixer - 还生成 tailwindcss 配置文件

\n

使用 npm：

\n

npm install -D tailwindcss postcss autoprefixer\n

\n

用纱线：

\n

yarn add tailwindcss postcss autoprefixer\n

\n

现在生成配置文件：

\n

npx tailwindcss init -p\n

\n

2. 将以下两行添加到文件中tailwind.config.js：
\n重要的行是：

\n

npm install -D tailwindcss postcss autoprefixer\n

\n

因此该文件应如下所示：

\n

yarn add tailwindcss postcss autoprefixer\n

\n

3. 创建一个文件并为每个 Tailwind\xe2\x80\x99s 层./src/index.css添加指令。@tailwind

\n

npx tailwindcss init -p\n

\n

4. 将新创建的./src/index.css文件导入到您的./src/main.js文件中。

\n

    "./index.html",\n    "./src/**/*.{vue,js,ts,jsx,tsx}",\n

\n

注意import \'./index.css\'

\n

就是这样。只需开始使用npm run serve或yarn serve或 本答案顶部描述的设置即可。

\n