为什么要使用它?
首先,类似于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 ./ Available on: http://127.0.0.1:8080 http://10.8.74.44:8080 Hit CTRL-C to stop the server ``` 其含义是:正在运行一个将当前目录作为根目录的服务器,可以通过以下方式访问这台服务器:http://127.0.0.1:8080(本机浏览器访问)
http://10.8.74.44:8080(同一个网络的其他电脑访问)
可以通过ctrl+C
使服务器停止运行。