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

 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).

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

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

前端在本地启动服务预览html页面的更多相关文章

  1. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  2. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

  3. type="file"实现兼容IE8本地选择图片预览

    一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...

  4. 前端实现图片上传预览并转换base64

    前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...

  5. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

  6. 本地启动服务,两个进程分别监听两个端口,导致两个 URL 不同

    问题描述: 本地启了两个服务:A(http://localhost:8001) B(http://localhost:8000),A 项目要怎么才能关联到 B 项目,也就是 A 项目请求怎么跳到 B ...

  7. 体验Azure的 Automation “自动化” 服务预览版

    一直想要实现对Azure上跑的虚机进行定期的自动备份.在网上搜了一下有关的解决方案,发现一个不错的帖子,是基于国外的Azure服务做的.基本原理就是利用Azure的Automation(自动化)服务来 ...

  8. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  9. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

随机推荐

  1. 单行文本截断 text-overflow

    div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  2. excel导入、下载功能

    1.excel导入.下载功能 2.首先,我们是居于maven项目进行开发引入poi,如果不是那就手动下载相应的jar包引入项目就可以了 <!-- poi --> <dependenc ...

  3. Flink常用资料网址

    Flink官网https://flink.apache.org/ 阿里flink开发文档 https://help.aliyun.com/product/45029.html?spm=a2c4g.11 ...

  4. 在idesktop中加载天地图服务并叠加矢量数据

    在天地图中加载天地图在线服务,然后叠加上我们制作的专题图,可以查看制图效果. 以加载山东省天地图矢量地图服务为例: 服务地址: http://www.sdmap.gov.cn/tileservice/ ...

  5. linux学习(五)-----组管理和权限管理

    Linux 组基本介绍 在 linux 中的每个用户必须属于一个组,不能独立于组外.在 linux 中每个文件有所有者.所在组.其它组的概念. 1)所有者 2)所在组 3)其它组 4)改变用户所在的组 ...

  6. 关于Unity中资源打包

    资源包详细说明 Unity很智能只会打包用到的资源,比如sharedassets0.assets中的shader资源,如果场景中有OBJ用到了shader那么就会有shader打进这个包,如果没有就不 ...

  7. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. 第二周课堂笔记1th

    1.    三元运算 + 2.      for循环 for为有限循环,while为无限循环 可迭代对象:是字符串,数字不可以 数字不可以迭代但是可以用range函数 for i in range(1 ...

  9. JAVA中日期 yyyy-MM-dd HH:mm:ss和yyyy-MM-dd hh:mm:ss的区别

    HH是24小时制,hh是12小时制 区别就是:大写的H是二十四小时制的小时数(0-23),小写的h是十二小时制的小时数(am/pm 1-12) //24小时制 SimpleDateFormat sdf ...

  10. angularJs FileUpload插件上传同一文件无效问题记录

    参考:https://blog.csdn.net/qq_34829447/article/details/83780392 问题:使用FileUpload插件进行文件上传时,发现无法上传与上个文件相同 ...