VSCode 配置本地服务器

飞熊 • 2023年4月28日上午10:16 • 前端开发 • 阅读 290

有时候我们想要把 HTML + CSS + jQuery (js) 编写的项目，以类似三大框架脚手架形式在本地运行，通过安装配置 VSCode 的 Live Server 插件，便可实现这一功能。
传送门：Sublime Text3 配置本地服务器

1. 安装 Live Server

2. 开启 Server 服务

重新启动 VSCode 后，你会发现在软件的右下角的状态栏中出现了【Go Live】这个就是启动刚刚安装的插件开关啦。

点击启动服务器，会自动运行系统默认的浏览器，如图。

到这里服务器已经能跑起来了，我们只需要开发 index 文件，运行即可，默认是显示项目中所有的文件和文件夹。

回到VsCode再次点击即可关闭服务器

其他三种开启方法：

在HTML文件中右键，然后点击open live server；
快捷键 (alt+L, O) 打开服务 (alt+L, C) 关闭服务；
按F1,然后在输入栏中输入 Live Server: Open Live Server to start a server 打开服务，或者 Live Server: Close Live Server to stop a server 关闭服务；

3. 配置 Live Server

同学会发现默认是5500端口，那么万一端口冲突呢，或者我们需要自己设置端口呢？
如果端口冲突，插件会自动启动其他端口的，这个大家不必担心。
接下来就简单介绍下如何设置服务器的端口和代理（非必须）。

点击文件 => 首选项 => 设置

搜索关键字【liveserver】一直往下找，我们可以找到 live Server 相关设置

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