非web根目录的图片如何在网页上显示?_支持热加载的Web开发临时服务器搭建

引言

在web项目开发特别是一些静态网页开发的时候，我们在修改了文件中的html、CSS、js的时候常常会自己手动刷新页面来显示效果，或者我们在网上找到一款好的模板，然后想在本地演示，有时候静态模板不能直接打开，需要依赖服务器环境才能打开，这些给开发者带来了麻烦，所以今天介绍一个我常用到的一个工具live-server，可以一键搭建本地服务，而且支持热加载。

示例图片

如何安装？

安装我这里提供两种安装方式

• 使用npm全局安装

npm install -g live-server

这样安装的好处是可在任何地方使用它

• 在VSCode中安装扩展

我们可以直接在VSCode的扩展库中搜索Live Server

扩展

然后点击安装即可，在VSCode中安装扩展的好处是可以很方便的使用它，当然了其实命令行也很简单。

如何使用？

这里我们也分两种情况，我会使用一套后台模板来进行演示，如何在开发或者演示中使用它。

• 使用命令行的方式使用

首先你得从命令行进入到你的项目目录下，例如我的目录是

E:liveServerKharna_AdminAdminUI

然后我们直接在命令行输入

live-server

然后它就会给我们创建一个临时服务器，而且已经在浏览器打开了

文章开头说过，live-server是支持热加载(自动刷新)的，我在这里就不重复演示了，第一个截图已经展示了效果。在修改文件保存后会直接更新页面，非常的方便。

如果你想自定义端口，你可以直接执行下面的命令

live-server ./ --port=8090

这个地方需要注意的是你的项目根目录需要有index.html文件，这是它默认打开的文件，否则直接命令会列出当前目录的所有文件，在你点击后也可以访问，如下图

这里我点击了index2.html就跳转到了index2.html页面。

• 在VSCode中使用

在VSCode中使用非常方便直接右键菜单即可，大家下载体验就知道了，而且已提供了设置选项，但是一般情况下不需要，毕竟只是个临时服务器。

命令参数

官网提供了很多参数选项可供配置，如下截图，详细的信息可以到官网查看。

live-server的功能不仅仅是这些，以上只是最简单的使用方法，还可以配置node使用，详情请见官网：

https://www.npmjs.com/package/live-server

总结

live-server是一个有效提升我们工作效率比的神器，其热加载功能尤为好用，省去了我们手动刷新的时间，虽然诸如WebStorm也内置了静态服务器，但是毕竟不够轻量，而live-server很好的解决了这个问题，所见即所得。希望通过本文的介绍，能对你有所帮助，如果你有更好的建议，可以到评论区留言，共同学习，感谢大家的支持。