Visual Studio Code 断点调试 Vue.js 功能 详细配置

vs code 在调试项目代码时实现 代码行设置断点调试，经实践做以下设置后能命中断点，实现调试功能：

一、安装 Chrome Debug 插件

二、 安装 open in browser 插件

三、设置默认浏览器

修改默认浏览器：选择文件—首选项—设置，在搜索栏输入open-in-browser.default，出现以下在编辑框中编辑输入：Chrome

四、 设置 launch.json 配置文件代码

将 launch.json 中的全部代码替换成如下代码

{
	"version": "0.2.0",
	"configurations": [
	  {
		"type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:9528", //注意：URL中的端口号要跟WEBPACK配置的启动端口号一致
        "webRoot": "${workspaceFolder}/src",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://?app/*": "${webRoot}/*"
        }
	  }
	]	
  }

五、 配置 vue.config.js 文件夹

在 configureWebpack: 中添加如下一行代码

source-map ：这是最原始的 source-map 实现方式，其实现是打包代码同时创建一个新的 sourcemap 文件，
并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿

六、 开启调试
1. ”终端“窗口中输入 npm run dev 命令，启动程序
2. 按”F5" 开启调试模式，Chrome 浏览器自动启动打开站点，运行到 “中断”代码行就会命中

如图所示