VSCode 配置本地服务器

有时候我们想要把 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"
  ]
}

4. 使用注意事项

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

VSCode 配置本地服务器

1. 安装 Live Server

2. 开启 Server 服务

3. 配置 Live Server

4. 使用注意事项

猜你喜欢