如何在VSCode中调试Vue项目

为了在 VS Code 中顺利调试 Vue 项目，需要进行以下几个步骤：

1. 在 Chrome 浏览器的快捷方式属性中添加 --remote-debugging-port=9222 参数，以启用远程调试功能。
2. 在 VS Code 中安装名为 “Debugger for Chrome” 的插件，这将允许 VS Code 连接到 Chrome 并进行调试。
3. 在 VS Code 的左侧边栏选择调试选项卡，点击 “创建一个 launch.json 文件”，然后选择 “Chrome: Attach”。在生成的 launch.json 文件中输入以下配置，确保将 url 和 webRoot 替换为你的项目实际路径和端口：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "attach",
         "name": "Attach to Chrome",
         "port": 9222,
         "webRoot": "${workspaceFolder}/src",
         "url": "http://localhost:8080/",
         "sourceMaps": true,
         "sourceMapPathOverrides": {
           "webpack:///src/*": "${webRoot}/*"
         }
       }
     ]
   }

4. 编辑项目的 config/index.js 文件，在开发环境配置（dev）中添加以下设置，以便更好地支持源代码映射：

   devtool: 'cheap-module-eval-source-map',
   cacheBusting: false,

5. 启动 Chrome 浏览器，并通过命令行运行 npm run dev 启动 Vue 项目。返回 VS Code，点击调试工具栏中的绿色三角按钮开始调试会话。