前端在本地启动服务预览html页面

本文介绍了一种在本地搭建服务器的方法,用于预览移动端项目的实际效果。通过使用http-server,开发者能在真机上查看项目,对比浏览器模拟器与实际设备间的差异,确保页面布局在不同设备上的表现一致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法。

 1、首先在终端安装http。

   npm i http-server -g。(g全局安装)

  

         安装成功之后

    2、cd到需要查看的页面的文件夹处(该文件夹必须是包含js、css等所有文件的文件夹)

         例如:必须是memberPage这个文件夹(cd memberPage/)

        

 

    3、可以看一下server下的命令都有什么

         http-server -h

         

    常用的就是-c其他不做过多阐述,可自行百度其他意思

 

  4、运行查看项目

         http-server . -c-1(-c-1是不需要缓存)

         启动完毕之后会有如下界面

         

 

 

    5、在电脑上查看

         例如:localhost:8080/(默认打开index页面)若要打开index0.html就需要localhost:8080/index0

    6、在手机预览效果

         手机端输入http-server地址+文件名字。http-server地址一般是用带ip的那个例如(http://10.2.85.221:8080/index0).

         注意:手机访问的话,需要手机和电脑是在同一局域网下。

         然后手机和浏览器的模拟机的出入就一目了然啦。具体怎么在手机端查看布局问题请看下一篇《如何在真机进行前端页面调试》。

 

转载于:https://www.cnblogs.com/lxn2/p/10006222.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值