vscode-Live Server的使用心得

Posted 2020-10-01 马玲俊

一，安装Live Server插件（不详细说明了）

二，开启Server（服务）

有四种方式：

1. 在窗口的最底部有Go Live可以点击，一旦点击，就会自动在浏览器中打开html文件

2. 在HTML文件中右键，然后点击open live server

3. 快捷键 (alt+L, O) 打开服务   (alt+L, C) 关闭服务

4. 按F1,然后在输入栏中输入 Live Server: Open Live Server to start a server  打开服务，或者 Live Server: Close Live Server to stop a server 关闭服务

三、关于Live Server的配置

 1 {
 2 "liveServer.settings.port": 8080, //设置本地服务的端口号
 3     "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
 4     "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
 5     "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
 6     "liveServer.settings.NoBrowser": false,
 7     "liveServer.settings.ignoredFiles": [//设置忽略的文件
 8         ".vscode/**",
 9         "**/*.scss",
10         "**/*.sass"
11     ]
12 }

四、使用注意事项

1、设置服务根路径的配置，只能设置到文件夹，不能设置到具体的HTML文件，例如 /dist/test.html  结果能打开页面，但是文件里面引用的文件加载出现报错。

2、根目录下会自动打开index.html