编程知识 cdmana.com

vue-cli 调试配置

本文使用VSCode调试vue-cli项目,关于vscode的调试功能可参考:VSCode调试模式

进入正题,在项目空间下的.vscode目录中创建 launch.json 文件

node方式调试

launch.json文件内容如下:

{
    
  "version": "0.2.0",
  "configurations": [
    {
    
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js",
      "args": [
        "serve"
      ]
    }
  ]
}

打上断点,运行起来即可调试。

npm调试

  1. launch.json文件内容如下:
{
    
  "version": "0.2.0",
  "configurations": [
    {
    
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug"
      ],
      "port": 9229
    }
  ]
}
  1. 修改package.json,在scripts中增加一行配置 "debug": "node.exe --inspect-brk=9229 node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js serve",如下:
  ...
  "scripts": {
    
  	...
    "debug": "node.exe --inspect-brk=9229 node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js serve"
  },
  ...

注意:package.json中scripts配置的key值(示例中为"debug")和 –inspect-brk=9229(指定端口为9229)要分别对应到 launch.json中runtimeArgs配置的第二个参数(示例中为"debug")和 port配置(示例中为 9229

打上断点,运行起来即可调试。

版权声明
本文为[markix]所创,转载请带上原文链接,感谢
https://markix.blog.csdn.net/article/details/119923060

Scroll to Top