最近需要在本机调试原生与H5的交互,需要将html放在服务器上以供app可以通过链接访问。当然,直接把html放在本地也是没毛病的,不过这次我们的重点是:通过自建服务器加载H5。
1. 安装node、npm
1.1进入 nodejs官网下载页
1.2下载并安装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
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,安装虚拟服务器