最近需要在本机调试原生与H5的交互，需要将html放在服务器上以供app可以通过链接访问。当然，直接把html放在本地也是没毛病的，不过这次我们的重点是：通过自建服务器加载H5。
1. 安装node、npm
1.1进入 nodejs官网下载页
1.2下载并安装macOS Installer (.pkg)
macOS Installer (.pkg)
1.3检查node、npm是否安装完成
在终端输入
$：node -v
v10.14.2
$： npm -v
6.4.1
如果安装成功，则会顺利输出版本号
1.3更改npm 源，如果不更改源，会导致某些资源下载失败
$:npm config set registry http://registry.npm.taobao.org/
2. 安装http-server
$:npm install http-server -g
-g 表示安装在全局，不只是当前用户能用。
如果报找不到文件的错误，请用管理员权限运行
$:sudo npm install http-server -g
3. 加载H5文件
3.1 在桌面创建一个测试文件夹Test
3.2 将H5文件放入Test文件夹
3.3 cd进入Test 文件并执行
$:http-server .
如果显示结果如下，则表示本地服务器已成功启动
$ http-server .
Starting up http-server, serving .
Available on:
http://127.0.0.1:8080
http://192.168.1.229:8080
http://192.168.2.1:8080
Hit CTRL-C to stop the server
3.4 打开浏览器，输入localhost:8080
localhost
dist是我这里的H5文件夹，小伙伴这里应该显示的是你的H5文件夹
在页面点击此文件夹，则可以打开H5页面
4 在手机端加载此H5
查看终端，在上面执行完 http-server .后（.是代表在当前目录下）会显示本地地址如下：
Starting up http-server, serving .
Available on:
http://127.0.0.1:8080
http://192.168.1.229:8080
http://192.168.2.1:8080
Hit CTRL-C to stop the server
第一行代表本机地址，可以在电脑上直接访问
第二行代表在局域网里的地址，如果手机与电脑同属一个局域网，那么可以通过这个地址加载H5
第三行代表电脑的wifi地址，如果手机连接的是电脑的热点，那么可以通过这个地址加载H5.
5 关闭server
5.1选择终端窗口
5.2 键盘输入Control+ C
^Chttp-server stopped.
Ok，so much for this class.goodbye everyone.
参考博文 ： Mac下安装npm，http-server，安装虚拟服务器
网友评论