我最近更新了@vue的webpack和子模块到v5,遵循this。这是必要的,因为web worker不使用v4。现在我的问题是我不能调试代码,我不知道从哪里开始。我接受任何帮助我诊断问题的建议
代码运行正常,只是不再在断点处停止。我的vue.config.js
在devtoolModuleFilenameTemplate
中有一个配置,如果我没有弄错的话,它应该是与.ts文件一起工作的,我试图删除它,但没有帮助。
我在这里搜索了一下,没有发现任何人有类似的问题。我目前的版本是5.0.8,但我也尝试了5.0.1。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 = {
devServer: {
allowedHosts: 'all',
port: 5000,
host: '0.0.0.0',
},
configureWebpack: {
devtool: 'source-map',
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=script\b/) &&
!info.allLoaders.match(/\bts-loader\b/)
if (!isVueScript) {
filenameParts.push('?' + info.hash)
}
return filenameParts.join('')
}
},
},
},
}
launch.json
:
{
"version": "0.2.0",
"configurations": [
{
"name": "vue.js: chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}/src"
}
]
}
1条答案
按热度按时间dwbf0jvd1#
你可以直接把
debugger
键放在你的代码中,在vscode中安装断点。然后,用你的浏览器调试。下面是一个示例:
希望它希望:)