编程知识 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://cdmana.com/2022/01/202201080559015466.html

Scroll to Top