在 VS Code 中调试不适用于 Typescript Vue 应用程序

Question

我生成了一个开箱即用的新 Vue 应用程序，如下所示：

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

在 VS Code 中添加了一个 launch.json，如下所示：

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

将 vue.config.js 添加到我的项目根目录，如下所示：

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

在 main.ts 中放置一个断点：

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

npm run serve从命令行运行并在 VS Code 中按 F5。没有休息。我该如何解决这个问题？Typescript 不适合 Vue 吗？我以前做过 JS 项目。

Answer 1

不幸的是，其他答案都不适合我。也许是因为我使用的是单文件组件（SFC），而他们没有？

在花了几个小时深入研究这个问题之后，我想我已经找到了它的根源：

在构建过程中，Vue 会将您的 SFC 拆分为各自的部分（<template>、<script>和<style>），并通过适当的加载器运行这些部分。

当您的 SFC 使用 TypeScript 时，<script>这些 SFC 的一部分将使用 TypeScript 编译器 (TSC) 进行编译。问题是 TSC 不知道它正在编译的代码实际上源自您的 SFC，因为它看到的只是Vue 编译器分离后<script>的部分内容。

因此，TSC 生成的源映射包含不正确的行号（它们不会向下移动以补偿<template>SFC 的部分）、不正确的源文件引用（文件名包含 Vue 编译器放置在那里的哈希值）以及源文件内容不正确（内容仅<script>包含代码，并且会缺少和代码）。<template><style>

不幸的是，我无法在这里描述如何解决这个问题，因为这会使这篇文章变得很长，但我可以将您重定向到我写的有关该主题的博客文章。

简而言之，我解决问题的方法是利用 Webpack 构建过程来纠正损坏的源映射。