VS Code中的调试不适用于Typescript Vue应用

问题描述

我像这样开箱即用地生成了一个新的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：

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

像这样在我的项目根目录中添加一个vue.config.js：

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

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

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

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

解决方法

按照这个食谱，它应该可以解决您的问题 - https://github.com/microsoft/vscode-recipes/tree/master/vuejs-cli

您的launch.json 需要看起来更像这样（省略preLaunchTask，除非您在tasks.json 中定义它）：

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

,

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

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

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

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

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

很遗憾，我无法在此处描述如何解决此问题，因为它会使这篇文章非常，但我可以将您重定向到 {{3 }} 我写过这个话题。

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

,

尝试为您的sourceMapPathOverrides使用以下代码段

"sourceMapPathOverrides": {
        "webpack:///src/*.vue": "${webRoot}/*.vue","webpack:///./src/*.ts": "${webRoot}/*.ts",}