VS Code 中的调试不适用于 Typescript Vue 应用程序
Posted
技术标签:
【中文标题】VS Code 中的调试不适用于 Typescript Vue 应用程序【英文标题】:Debugging in VS Code does not work for Typescript Vue app 【发布时间】:2021-01-06 09:38:02 【问题描述】:我像这样开箱即用地生成了一个新的 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 项目。
【问题讨论】:
sourceMapOverrides 部分是很多人解决这个问题的地方,我需要在 src 之前有一段时间,比如 \\\.\src,我认为在浏览器中查看 webpack 源文件树会告诉你什么它正在使用的“文件夹”。 "sourceMapPathOverrides": "webpack:///./src/*": "$webRoot/src/*" 【参考方案1】:不幸的是,其他答案都不适合我。可能是因为我使用的是单文件组件 (SFC) 而不是?
在花了几个小时研究这个问题之后,我想我已经找到了它的根源:
在构建过程中,Vue 会将您的 SFC 拆分为各个部分(<template>
、<script>
和 <style>
)并通过适当的加载器运行这些部分。
当您的 SFC 使用 TypeScript 时,这些 SFC 的 <script>
部分是使用 TypeScript 编译器 (TSC) 编译的。问题是 TSC 不知道它正在编译的代码实际上来自您的 SFC,因为它所看到的只是 <script>
部分的内容在它已被 Vue 编译器隔离.
因此,TSC 生成的 Source Maps 包含不正确的行号(它们不会向下移动以补偿 SFC 的 <template>
部分)、不正确的源文件引用(文件名包含由Vue 编译器)和不正确的源文件内容(内容将包含<script>
代码仅,并且将缺少<template>
和<style>
代码)。
很遗憾,我无法在此处描述如何解决此问题,因为这会使这篇文章非常变长,但我可以将您重定向到 blog post我写了关于这个主题的文章。
简而言之,我解决问题的方法是利用 Webpack 构建过程来纠正损坏的 Source Maps。
【讨论】:
感谢您在博客中提供的非常详细的回答!这让我发疯,您的解决方案完美运行。 还确认您可以使用 vscode 的内置浏览器调试器代替已弃用的 chrome 调试器扩展。只需将 launch.json 中的类型从“chrome”更改为“pwa-chrome”。 @EricBynum 不客气!我很高兴它有帮助。你会注意到我博客上的一个 cmets 提到它不能很好地与模块热重载配合使用。我没有机会研究为什么会这样,也没有时间研究如何解决它,但我想在未来的某个时候找到解决方案。【参考方案2】:按照这个食谱,它应该可以解决你的问题 - 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"
]
【讨论】:
谢谢!当没有其他工作时,这对我有用。我还必须在 vue.config.js 中有这个:module.exports = transpileDependencies: ['vuetify'], configureWebpack: devtool: 'source-map' 【参考方案3】:尝试使用下面的 sn-p 作为您的 sourceMapPathOverrides
"sourceMapPathOverrides":
"webpack:///src/*.vue": "$webRoot/*.vue",
"webpack:///./src/*.ts": "$webRoot/*.ts",
【讨论】:
这个答案对我有帮助。就我而言,我试图在 .js 混合文件中打断点。所以我在我的launch.json文件中添加了"webpack:///./src/*.js": "$webRoot/*.js"
到sourceMapPathOverrides
以上是关于VS Code 中的调试不适用于 Typescript Vue 应用程序的主要内容,如果未能解决你的问题,请参考以下文章
VS Code IntelliSense 不适用于 Unity。为啥?
VS Code Prettier - Code Formatter Extension 不适用于使用 Typescript 模板的 Create-React-App
docker-compose 用于将 VS Code 中的 node.js 调试器附加到 WSL docker 中的节点进程