VScode怎么开启本地服务器及本地调试？

超、凢脫俗 2023-10-11 14:09 10阅读 0赞

初入职场，接触不少新鲜的东西，从最初入门的工具是HBuilder，到现在逐渐熟悉的vscode，想记录下自己的成长，不想一边学着，一边忘着。想把自己接触到的东西都记录下来吧。有需要的小伙伴，也可以参考~

今天因为一些原因呢，要开启本地调试，以前用HBuilder打开本地的文件，你会发现文件的路径前面就会有localhost：端口号/路径名，HBuilder会自动开启本地服务，但是用vscode直接打开本地文件，你会发现它的路径是这个样子的：

![format_png][]

然而，我又不想再重新装回HBuilder,于是我去百度自学了（百度是个好东西，哈哈，当然这只是在有些方面）

1、首先，如果我们想开启vscode的本地服务，首先在他的商店里找到Debugger for Chrome这个插件，点击安装，下图我已经安装好了，所以就没有安装俩字了。

![format_png 1][]

2、接下来就是配置，图中我标了步骤,应该不难看懂吧，第三补是配置自己的文件路径，这个是要经常改动的，测试哪个文件就写上那个文件的名字就好，文件前面的$\{workspaceRoot\}这个不需要变动，变动的是后面的，第四步下拉选择那个你需要开启本地服务的文件夹就好

![format_png 2][]

3、接下来还要用npm安装一个包来开启本地服务器，使用ctrl+\`快捷键打开终端，然后输入npm install -g live-server，出现红框标注的那个部分就说明安装成功了

![format_png 3][]

4、然后在命令行里输入 live-server,浏览器就会自动打开你要调试的页面

![format_png 4][]

![format_png 5][]

然后想看哪个页面，自己点击那个就好了。

Error: listen EACCES 0.0.0.0:8080

这种情况一般是端口被占用，如果本地不用VS的话，可以释放端口，方法

NT kernel & System 占用占用80端口  
问题：

1 运行'netstat -ano'发现80端口被pid=4的进程占用

2 打开任务管理器，发现pid=4的进程，其实是system进程，其对应的进程描述是NT kernel & system。

如何清除：

解决方法：

http协议里的某个进程占用了80，但是在任务管理器显示的是System,最后发现是http协议的某个进程占用（发现的过程也是在网上搜索得知道，这个进程显式停止是无法停止的，只有在cmd.exe里使用net stop http来停止

1、打开cmd

2、运行net stop http

3、按y 确定

（显示HTTP服务无法停止，使用管理员方式再试试，还是无法停止，先不管）

4. Sc config http start= disabled

5、重启

6、测试，PID4还是启动的。但是80已经不被占用了。发现445端口被PID4 占用的。

试验方法二：

1、打开regedit

1）找到HKEY\_LOCAL\_MACHINE目录

2）找到System

3）找到CurrentControlSet

4）找到Services

5）找到http

6）右边栏：找到start

7）打开，将3改为4，确定

8、重启电脑，就解除了NT Kernel & System占用80端口，如果要使用vs能够正常运行，则反过来把4改成3即可。

（测试不行啊，重启端口还是被占，什么变化都没有）

如果本地安装VS的话，释放端口会导致VS不能正常运行，所以此时要修改默认端口8080，live-server的配置文件里面有个index.js文件

![Center][]

![Center 1][]  
修改完成之后，运行命令：

E:\\vue\\code1117>live-server  
Serving "E:\\vue\\code1117" at http://127.0.0.1:7999  
Ready for changes  
GET /favicon.ico 404 5.152 ms - 24

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LTljZjBjZDQwYzAyMjVjNDAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzM5L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LTc0NTAxMmEwYWJkMjM5YTMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNDU3L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LWMwODg2YjBiMTg5MTI4MjUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LWNkOGFhZmVkYWI4ZWZjYzQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzI2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LWJhNTliMTMwMTRlN2ZmMWYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTA5L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MzkwNTM3LTEwOGYxNDE2MGFhYzcxOWMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTE4MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[Center]: https://img-blog.csdn.net/20171122110454642?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA3ODEzMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20171122110514463?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA3ODEzMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center