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

 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. 使用line-height垂直居中在安卓手机上效果不好

    前端实现单行垂直居中用的最多的方法可能就是line-height了吧.该属性在pc端和ios手机上效果都很好,可到了安卓手机,有很大几率发生文字上移的现象 知乎有人分析了导致这一现象的原因,Andro ...

  2. Maven - 深入理解maven构建生命周期和各种plugin插件

    作者:亚当-adam 来源:CSDN 原文:https://blog.csdn.net/zhaojianting/article/details/80321488 版权声明:本文为博主原创文章,转载请 ...

  3. scala中的闭包简单使用

    object Closure { /** * scala中的闭包 * 函数在变量不处于其有效作用域内,还能够对变量进行访问 * * @param args */ def main(args: Arra ...

  4. Jupyter NoteBook输出的图表太小看不清怎么办?

    如果使用的是matplotlib绘图,可以通过以下命令更改图片的大小: %matplotlib linline 如果是 plt.figure(figsize=(5,3)) #其中(5, 3)用于控制图 ...

  5. dos中文显示乱码怎么办?

    其实只需要一条命令 chcp 65001 执行该操作后,代码页就被变成UTF-8了 也可是GBK,  命令式:  chcp  936 2.修改窗口属性,改变字体 在命令行标题栏上点击右键,选择&quo ...

  6. 实现客户端连接Mysql数据库服务器

    以前学习mysql的时候,都是部署在本机,这样不存在客户端主机与服务器主机连接的问题,都是直接用localhost登录就行. 今天因项目需要,我们把mysql部署在服务器上,然后客户端装了client ...

  7. 第三周课堂笔记1thand2thand3th

    元组   元组是以逗号隔开的 元组有索引有切片,元组是小括号和中括号的集合, 元组中的东西不可修改(小括号内的东西不可被修改,但是小括号里的列表和字典可以被修改)   2. 由内存地址来分 可变数据类 ...

  8. NEERC 2015 Adjustment Office /// oj25993

    题目大意: 输入n,q: 矩阵大小为n*n 每个位置的值为该位置的行数+列数 接下来q行 “R m”表示输出第m行的总和并整行消去 “C m”表示输出第m列的总和并整列消去 Sample Input ...

  9. 【笔记篇】C#笔记2

    返回目录:目录请戳这里~ C#数组 基本概念不提.. int[] a; bool[] b = new bool[10]; float[] c = {0.5, 57.0, 233.3, 12345.67 ...

  10. css3 随记

    1 让子元素对其的方式  box-pack 2 -webkit-text-size-adjust  解决字体大小失效问题http://www.frontopen.com/273.html 3 disp ...