前端在本地启动服务预览html页面
在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法。
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页面的更多相关文章
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- html5上传本地图片,在线预览及裁剪(filereader,canvas)
1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...
- type="file"实现兼容IE8本地选择图片预览
一.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploa ...
- 前端实现图片上传预览并转换base64
前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...
- jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)
我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...
- 本地启动服务,两个进程分别监听两个端口,导致两个 URL 不同
问题描述: 本地启了两个服务:A(http://localhost:8001) B(http://localhost:8000),A 项目要怎么才能关联到 B 项目,也就是 A 项目请求怎么跳到 B ...
- 体验Azure的 Automation “自动化” 服务预览版
一直想要实现对Azure上跑的虚机进行定期的自动备份.在网上搜了一下有关的解决方案,发现一个不错的帖子,是基于国外的Azure服务做的.基本原理就是利用Azure的Automation(自动化)服务来 ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- Vue 中使用 viewerjs进行本地上传预览图片
https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...
随机推荐
- 删除除了特指的某几个文件外的所有文件的Linux指令
栗子: 不删除 logs文件夹和credential文件夹 1. rm -rf !(logs|credential) 2. ls | grep -v logs |grep -v credenti ...
- [JZOJ3692] 【SRM 611】ElephantDrinking
题目 题目大意 我真的不知道怎么用简短的语言表述出来-- 直接看题目吧-- 正解 假设只有左边和上边延伸过来的,那似乎很好办:设\(f_{i,j}\)表示左上方到\((i,j)\)所形成的矩形中,如果 ...
- Windows 10 连接服务器
{ windows + r input mstsc } { //mstsc D:\TOOL\Servers.rdp /v 127.0.0.1:9998 }
- thinkphp Trace方法
页面Trace只能用于有页面输出的情况,但是trace方法可以用在任何情况,而且trace方法可以用于AJAX等操作. Trace方法的格式: trace('变量','标签','级别','是否记录日志 ...
- MFC打开/保存文件对话框:CFileDialog
MFC打开/保存文件对话框:CFileDialog CFileDialog 文件选择对话框的使用:首先构造一个对象并提供相应的参数,构造函数原型如下: CFileDialog::CFileDial ...
- JavaWeb三大组件—过滤器filter
JavaWeb三大组件 1. 都需要在web.xml中进行配置ServletListener(2个感知监听器不需要配置)Filter 2. 过滤器 它会在一组资源(jsp.servlet..css.. ...
- XJOI夏令营501-511NOIP训练14——好朋友
传送门:QAQQAQ 题意:noip2011就要来了,W校的同学们不仅看重这次比赛,更看重noip2011和谁住在同一个房间.同学之间的关系好坏可以用一个亲密值表示,亲密值越大,两个同学关系越好.小A ...
- 如何在 JavaScript 中使用 C 程序
JavaScript 是个灵活的脚本语言,能方便的处理业务逻辑.当需要传输通信时,我们大多选择 JSON 或 XML 格式. 但在数据长度非常苛刻的情况下,文本协议的效率就非常低了,这时不得不使用二进 ...
- 初识OpenCV-Python - 004: Trackbar as the color palette
此次学习了如何用OpenCV建立一个色调盘.其中会用到cv2.getTrackbarPos(), cv2.createTrackbar()函数. code: import cv2import nump ...
- USACO 2003 Fall Orange Cow Exhibition /// 负数01背包 oj22829
题目大意: 输入n 接下来n行 每行输入 a b 输出n行中 a+b总和最大的同时满足 所有a总和>=0所有b总和>=0的值 负数的01背包应该反过来 w[i]为正数时 需要从大往小推 即 ...