参考:http://www.browsersync.cn/#install

首先全局安装BrowserSync : npm install -g browser-sync

其次在项目文件夹下运行: browser-sync start --server --files "css/*.css, *.html"

用以监听css和html文件,该文件夹下最好有index命名的html文件

运行完成后会跳出如下页面:

我的url是我自己已经设置好了的,显示的是电脑ip,地址栏默认其实是显示localhost的,如果将其改为自己的电脑端口号需要在设置里面进行设置。

将端口号3000更改一下,比如改成3001,就会跳到设置页面:

然后点击这里:

随后将想看的某个项目的地址输入:

将此地址栏发到手机上,只要是在同一个局域网内,就能在手机上查看此项目了

H5页面在手机上查看 使用手机浏览自己的web项目的更多相关文章

  1. 如何在手机上查看测试vue-cli构建的项目

    用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一 ...

  2. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

  3. 便捷的方式在手机上查看Unity3D的Console Log(调试信息)

    Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itsel ...

  4. 便捷的方式在手机上查看Unity3D的Console Log(调试信息 日志)

    Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itsel ...

  5. H5页面中判断是安卓手机还是ios手机的方法;APP页面中嵌套的H5跳转到APP其他页面的方法。

    (一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...

  6. 【Net】CEF浏览IISExpress运行Web项目

    前言 本文介绍在Winform桌面应用中,使用IISExpress做Host主机,启动.Net平台的Web项目. 浏览Web网页使用CEF开源组件. 准备 首先创建Winform项目WinFormII ...

  7. 怎么在手机上查看sqlite db

    在 从 百度应用 下载“SQLite编辑器(SQLite Editor)” 安装到手机上.前体是 手机已经Root(可以用360一键Root软件进行root).

  8. Web页面在手机上显示过大问题

    网上抄来了,自己也备忘下:增加<meta name="viewport" content="width=device-width, initial-scale=1. ...

  9. 微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...

随机推荐

  1. yes - 不断输出一个字符串,直到杀死其为止

    SYNOPSIS(总览) yes [OPTION]... [STRING]... DESCRIPTION(描述) 不断输出包括所有指定STRING(s)的一行,或者是`y'. --help 显示帮助并 ...

  2. Unicode - 16 位统一超级字符集

    描述 (DESCRIPTION) 国际标准 ISO 10646 定义了 通用字符集 (Universal Character Set, UCS). UCS 包含所有别的字符集标准里的字符,并且保证了 ...

  3. Center OS 7安装 Apollo

    声明: 每个人的情况都不一样,所以大家在看教程的时候自行斟酌,最好先扫一遍,再来根据自身情况进行操作.同时,遇到的问题也可能不尽相同,要灵活处理. 了解: Apollo是从原始ActiveMQ的基础构 ...

  4. linux 6 timezone修改

    linux 6 / Amazon linux 因为正好在使用Amazon 的linux AMI  又遇到了需要修改系统时区这个case 所以就调查了一下修改方法,因为Amazon的linux版本是由A ...

  5. wpf tabcontrol内的datagrid的selectionChanged事件向往传递问题

    tabcontrol 内的一个tabitem里是datagrid 当程序相应datagrid的selectionchanged事件后会向上传递到tabcontrol的selectionchanged事 ...

  6. Zabbix-server及zabbix-web安装手册(centos7)

    注:本实验环境在centos7mini下实验,具体相关软件版本最好一致,避免依赖关系缺失. 当然也可以新建用户zabbix(不使用root,避免安全隐患),在zabbix下执行操作,加sudo提升权限 ...

  7. 转:深入浅出cache写策略

    转自:http://www.ssdfans.com www.ssdfans.com › blog › 2018/07/27 › 深入浅出cach... 随着计算机行业的飞速发展,CPU的速度和内存的大 ...

  8. 深入浅出的Object.defineProperty()

    vue的原理 观察者模式和订阅-发布者模式. Vue实例被创建时,会遍历data属性,并通过Object.defineProperty将 这些属性转化为getter/setter,并进行追踪依赖.每当 ...

  9. javascript中的select、checkbox

    遍历checkbox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  10. NX11.0和VS2013 创建NXOpen 开发模版失败解决方案【转载】

    转载自PLM之家论坛 NX11.0和VS2013 创建NXOpen 开发模版失败解决方案 首先我觉得这个可能是西门子疏忽,基本上每个大版本没有补丁前都有类似问题,下面来说说怎么解决吧.注意这里版本,N ...