vs 中调试VueCli3 项目

起因

在根据官方的使用说明完成相应的配置并没有解决调试问题。

有效方法

• 具备的插件

vscode 中的 Debugger for Chrome插件

• 配置 vue.config.js

    module.exports = {
	configureWebpack: {
		devtool: 'source-map'
	}
    };
    或者另外一种写法的
    module.exports = {
        configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
                return{
                    devtool: 'source-map'
                }
            }
        }
    }

• 配置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}/*",
                "webpack:///./src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"
            }
        }
    ]
}

• 启动项目(package.json中设置的启动命令 ex:npm run serve)
• F5 打开调试

新问题

在使用VueCLi3 + Ts就无法调试ts文件 ts文件打断点是不会进入的，有已经解决的大佬麻烦告知一下~