如何快速搭建静态资源服务器

在开发中，很多时候需要在本地开启静态资源服务器来测试，所以就需要一个简单省事好用的http服务器。以前的时候，都是使用 php 的本地环境，也算比较方便，但是自从学了nodejs，发现创建http-server更方便。

本文的目的

在这篇文章中，我将向您展示如何使用NodeJS创建一个非常简单的HTTP服务器。您可以通过http访问目录中的静态资源，如HTML，Javascript，CSS等，比如：

• http://localhost:8080/hello.html
• http://localhost:8080/abc.js

而不是通过默认的file:///来访问

那问题是为什么只有需要一个HTTP才能访问静态资源呢？

是因为HTML文件含有Javascript文件时，如果通过默认的file://地址来访问此文件的话，浏览器会阻止本地Javascript文件的一些操作，此时就需要安装HTTP-Server来解决这个问题。

报错信息：

• Failed to load file:///E:/webexamples/reactjs/hello-reactjs/person.jsx:
• Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

创建HTTP-Server

首先，确保已在计算机上安装NodeJS和npm； 否则，请按照以下说明进行安装：

• 在Windows上安装NodeJS
• 打开 Git Bash或其他命令行工具，依次输入以下命令，按回车：

npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false
复制代码

• npm 的配置被存储在 ~/.npmrc，你可以随时改。

①接下来第一步，先创建一个空目录：

②利用命令行 工具 进入这个目录，这里用的是Git Bash。右击鼠标，点击Git Bash here，即可用Git Bash打开这个目录：

③运行以下命令安装http-server：

$ npm install -g http-server
复制代码

④启动HTTP-Server，输入命令：

$ http-server -c-1
复制代码

到此您的HTTP服务器就已经启动了，它正在端口8080上监听，您可以通过访问以下链接进行检查，3个地址在电脑端打开的是同一份东西：

• http://192.168.1.116:8080/ （只有这个地址能在手机中预览）
• 127.0.0.1:8080/ （2和3性质是一样的）
• localhost:8080/ （较为常用）

⑤在该目录中创建一个HTML文件，您可以通过此HTTP地址访问它：

⑥这里Windows 用户需要注意了，如果你发现你修改了源代码，页面却无法更新，说明http-server 的缓存还未消除，那么可以这样做：

1. 打开 Chrome 开发者工具
2. 点击 Network
3. 勾选 Disable Cache

这样缓存就不存在了~

其他命令安装HTTP-Server

这里就不仔细介绍步骤了，因为大部分操作和结果与第2步是一样的，直接上命令：

第一种方法：

安装：

$ npm i startserver -g
复制代码

快速开启：

$ startserver
复制代码

第二种方法：

安装：

$ npm install -g live-server
复制代码

快速开启：

$ live-server
复制代码

如果看到其他有意思的方法，后续还会增加的！

以上就是我在近期收集到的一些方法资料，不一定全面，如有错误欢迎指正哦。

本人Github链接如下，欢迎各位Star

github.com/miqilin21/m…