为什么Webpack v5 Vue上的调试不再工作?

h43kikqp  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(256)

我最近更新了@vue的webpack和子模块到v5,遵循this。这是必要的,因为web worker不使用v4。现在我的问题是我不能调试代码,我不知道从哪里开始。我接受任何帮助我诊断问题的建议
代码运行正常,只是不再在断点处停止。我的vue.config.jsdevtoolModuleFilenameTemplate中有一个配置,如果我没有弄错的话,它应该是与.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"
        }
    ]
}
dwbf0jvd

dwbf0jvd1#

你可以直接把debugger键放在你的代码中,在vscode中安装断点。然后,用你的浏览器调试。
下面是一个示例:

希望它希望:)

相关问题