2.4 VSCode插件Live Server

原创声明。未经许可，不得转载，作者：小步教程。

web服务器。项目正式发布需部署在web服务器，其它主机用户通过网址正常访问网页，实际项目常用web服务器使用nginx、apache等。Live Server是一个web服务器，也称Live Server服务，主要用于开发测试。

VSCode插件Live Server具有两项优点：运行页面时自动启动web服务器，并自动打开浏览器，并自动打开页面；保存文件时，已经打开的页面自动更新。

2.4.1 安装方法

单击“扩展”面板，搜索相应的插件“Live Server”，单击右下角的“Install”按钮。

单击“已安装”，查看已安装插件。

本节介绍LiveServer的插件的参数配置，其它插件类似。插件右侧单击“管理”按钮。

弹出菜单选择“扩展设置”。

打开插件的配置界面，输入查询关键字port，界面如下，单击“在setting.json中编辑”。

端口默认为0，打开页面时端口会是随机数，可设置为需要的端口，例如：12345。

VSCode打开要运行的html文件，任意位置右击，选中“Open with Live Server”菜单。

hello.html页面文件内“右键”—“Open With Live Server”。

运行效果

浏览器地址http://127.0.0.1:12345/hello.html，表示访问本地的Live Server服务器。端口是前面设置的12345，IP地址127.0.0.1是一个特殊IP地址，代表本机地址。

title与body节点内的内容如下图所示。

修改body标签里的内容。

<body>
小步教程，即将开发企业简介小项目。
</body>

保存文件，页面内容会自动刷新。说明Live Server插件生效。