vue-cli 調試配置-在VSCode啓動NodeJS調試

在這裏，我們使用開發工具vscode，工具怎麼使用這裏就不描述了，直接進入主題。

vue-cli 調試配置

項目準備

1.下載vue-cli 項目
2.進入vue-cli\packages@vue\cli 目錄，查看cli包文件，執行命令 npm i

配置launch.json

        {
            "type": "node",
            "request": "launch",
            "name": "vue-cli",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceRoot}/vue-cli/packages/@vue/cli/bin/vue.js",
            "args": ["create", "hello-world"]
        },

這裏的效果相當於直接在終端輸入命令 vue create hello-world，創建一個hello-world項目。
進入文件vue-cli\packages@vue\cli\lib\create.js，設置斷點，運行可以進入斷點。

vue-cli-service 調試配置

準備項目

使用vue-cli 創建一個初始項目

vue create hello-world

配置launch.json

        {
            "type": "node",
            "request": "launch",
            "name": "vue-cli",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceRoot}/vue-cli/packages/@vue/cli/bin/vue.js",
            "args": ["create", "hello-world"]
        },

此處採用運行時的方式，因爲我們平常調用vue-cli-serve的命令時，通常是使用package.json中的npm run serve，所以這裏也是採用通過npm的方式調用，runtimeArgs中的 "run-script"是固定的，不可以修改，"debug"可以修改爲任意名稱，需要和package.json中的腳本名稱對應即可。

配置package.json

    "scripts": {
        "debug": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve"
    }

scripts 中增加debug命令，–inspect-brk配置的端口需要與launch.json中port保持一致即可。然後點擊vscode中的運行，debug窗口中會執行D:\Program Files\nodejs\npm.cmd run-script debug 命令。
然後在./node_modules/@vue/cli-service/bin/vue-cli-service.js 文件中打斷點，就可以進入斷點了。

其實平常我們運行npm run serve 的命令，實際上系統也是會node_modules.bin中尋找vue-cli-service.cmd來執行，本質上最後還是進入了文件./node_modules/@vue/cli-service/bin/vue-cli-service.js，調試的時候直接進入這個文件即可。
————————————————
版權聲明：本文爲CSDN博主「connie__wu」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/connie_1990/article/details/104779602