为什么要使用它?
首先,类似于vue-cli创建的项目,都能够实现浏览器中自动刷新,实时查看项目效果。其中的原理在于,webpack这样的工具启动了一个本地服务器,将本机当作一台服务器,这样在浏览器中输入`特定url`(如`http:localhost...`)便相当于访问一台服务器的文件,这里的服务器比较特殊就是本机。
试想,如果我们的前端项目中,不采用这种方式,要查看一个html文件的运行效果,需要怎么操作呢?我们很容易想到,直接用浏览器打开html文件就能够查看到效果,每查看一个html文件就需要去双击该文件。另外一种方式是,我们只需启动一个本地服务器,输入特定url,就能够访问特定目录的所有文件,很容易直接观察文件在浏览器中的执行效果。显然,后者不需要在浏览器和资源管理器间切换,显得更为方便。
这说明,如果我们需要测试服务器与客户端的交互,启动本地作为一个服务器是相当方便而有必要的。
另外一个理由:假使需要在某电脑X上访问本机文件,便可以启动本机作为一个服务器,就像访问其他任何网站一样,在电脑X的浏览器上输入特定`url`,就可以访问本机特定位置的文件。
安装和启动
假设你的电脑已经安装了`Node.js`和`npm`,那么启动http-serve服务是相当简单的。
首先,使用`npm`安装`http-server`:
npm install -g http-server
然后,进入你想作为本地服务器根目录的位置,输入如下命令:
http-server
当然,后面还可以跟一系列参数,这可以通过查阅相关文档进行配置,此处略。
访问本地服务器
启动本地服务器成功后,将在命令行中看到类似以下的提示:
Starting up http-server, serving ./
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://192.168.1.102:8080
http://127.0.0.1:8080
http://172.27.128.1:8080
Hit CTRL-C to stop the server
其含义是:正在运行一个将当前目录作为根目录的服务器,可以通过以下方式访问这台服务器:
http://127.0.0.1:8080(本机浏览器访问)
http://10.8.74.44:8080(同一个网络的其他电脑访问)
可以通过ctrl+C使服务器停止运行。
![](https://i-blog.csdnimg.cn/blog_migrate/da5249dd624cc4f8891368b4c0f03be3.png)