我开箱即用地生成了一个新的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代码中添加了一个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代码中按F5。没有休息。如何解决此问题？Typescript不适合Vue吗？我以前做过JS项目。
不幸的是，其他答案都不适用于我。也许是因为我使用的是单文件组件(SFC(，而它们不是？
在花了几个小时研究这个问题之后，我想我已经找到了它的根源：
在构建过程中，Vue将把SFC分解为它们各自的部分(<template>、<script>和<style>(，并通过适当的加载程序运行这些部分。
当您的SFC使用TypeScript时，这些SFC的<script>部分将使用TypeScript编译器(TSC(进行编译。问题是TSC不知道它正在编译的代码实际上来自您的SFC，因为它所看到的只是Vue编译器分离后的<script>部分的内容。
因此，TSC生成的源映射包含不正确的行号(它们不会下移以补偿SFC的<template>部分(、不正确的源文件引用(文件名包含Vue编译器放置在那里的散列(、，以及不正确的源文件内容(该内容将仅包含<script>代码，并且将缺少<template>和<style>代码(。
不幸的是，我无法在这里描述如何解决这个问题，因为这会使这篇的文章非常长，但我可以将您重定向到我写的关于该主题的博客文章。
简而言之，我解决问题的方法是利用Webpack构建过程来纠正损坏的源映射。
尝试将下面的代码段用于sourceMapPathOverrides
"sourceMapPathOverrides": {
"webpack:///src/*.vue": "${webRoot}/*.vue",
"webpack:///./src/*.ts": "${webRoot}/*.ts",
}
按照这个配方，它应该可以解决你的问题-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中，我的调试终于成功了。
/* eslint-disable */
const CompilerSfc = require('@vue/compiler-sfc')
const parse = CompilerSfc.parse
CompilerSfc.parse = (source, options) => {
return parse(source, Object.assign({ pad: true }, options))
}
module.exports = {
configureWebpack: {
output: {
devtoolModuleFilenameTemplate: (info) => {
if (info.allLoaders === '') {
// when allLoaders is an empty string the file is the original source
// file and will be prefixed with src:// to provide separation from
// modules transpiled via webpack
const filenameParts = ['src://']
if (info.namespace) {
filenameParts.push(info.namespace + '/')
}
filenameParts.push(info.resourcePath.replace(/^.//, ''))
return filenameParts.join('')
} else {
// otherwise we have a webpack module
const filenameParts = ['webpack://']
if (info.namespace) {
filenameParts.push(info.namespace + '/')
}
filenameParts.push(info.resourcePath.replace(/^.//, ''))
const isVueScript =
info.resourcePath.match(/.vue$/) &&
info.query.match(/btype=scriptb/) &&
!info.allLoaders.match(/bts-loaderb/)
if (!isVueScript) {
filenameParts.push('?' + info.hash)
}
return filenameParts.join('')
}
},
},
},
}