VScode导入Vue项目
1、使用VScode打开文件夹
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164329885-696080346.png)
2、找到运行按钮
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164411076-705305563.png)
3、判断有没有默认的配置文件存在
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164441090-1983089926.png)
4、若文件夹存在就检查配置文件是否存在
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164504149-606370630.png)
(1)打开launch.json,把如下代码粘贴到里面的"configurations": []列表中
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// "console": "none", // 只输出到“调试控制台”
// "console": "externalTerminal", // 外部终端调试器
"console": "integratedTerminal", // 内部终端调试器,同时输出到“调试控制台”和内置“终端”
// "console": "internalConsole", // 新版本VScode的选项,仅出输出到“调试控制台”
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": [
"--inline",
"--progress",
"--config",
"build/webpack.dev.conf.js"
]
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
]
}
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164539443-24323418.png)
(2)运行项目
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164606280-872226304.png)
(3)停止/关闭项目
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164635009-562915651.png)
5、若文件夹不存在
(1)点击创建launch.json文件
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164717201-1103638998.png)
(2)创建时会自动生成.vscode文件夹和launch.json文件
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164828104-879968363.png)
(3)打开launch.json,把如下代码粘贴到里面的"configurations": []列表中
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// "console": "none", // 只输出到“调试控制台”
// "console": "externalTerminal", // 外部终端调试器
"console": "integratedTerminal", // 内部终端调试器,同时输出到“调试控制台”和内置“终端”
// "console": "internalConsole", // 新版本VScode的选项,仅出输出到“调试控制台”
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": [
"--inline",
"--progress",
"--config",
"build/webpack.dev.conf.js"
]
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
]
}
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164539443-24323418.png)
(4)运行项目
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164606280-872226304.png)
(5)停止/关闭项目
![](https://img2020.cnblogs.com/blog/1361103/202103/1361103-20210317164635009-562915651.png)