要实现手机访问本地开发的移动端项目,首先做到两点:

1、本地打开的项目可以使用本地ip访问

2、手机和电脑同时处于一个同一个局域网中(手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接)

如果做到以上两点,那么恭喜你,就可以直接使用电脑ip在移动端访问了。

因为现开发项目是angular + ionic项目,所以以下设置及开发均以angular项目为基础进行设置。下面先来解决第一个难题:

一、angular项目配置可同时使用localhost和本地ip访问,步骤如下:

step1: 找到此文件“node_modules/webpack-dev-server/lib/Server.js”,按照下图修改

将return false 修改为return true;

step2: 修改配置文件package.json

step2: 重启项目

到此为止就可以直接使用本机IP:4200或者localhost:4200访问项目啦。

现在第一个问题问题解决了,那么接下来看看如何通过移动端访问本地angualr项目。上面已经说了,需手机和电脑在同一个局域网内,介绍了三种方法,现仅以电脑开wifi给手机连接为例进行讲解,其他两种方式设置类似。

二、手机连接电脑测试本地开发的移动端页面

step1:关闭电脑防火墙

或者80端口允许连接;
设置方法:
打开控制面板—Windows防火墙—高级设置—入站规则—新建规则—端口—输入80

step2: 开启电脑热点

在电脑右下角网络设置区域,右键 =》打开 “网络和Internet” 设置,打开如下页面:

开启之后,就可以字已连接设备地方区域看到连接的移动端手机

step3: 检查电脑是否可以连通手机

命令提示符 cmd -》(下图是连通的)
ping 分配的IP

step4: 如何获取电脑ip

命令提示符 cmd -》ipconfig

1.如果电脑是使用 有线网 连接到 因特网。
手机端应该输入的IP地址是 以太网网卡的IP(选择其中一个接口,另一个是备用的)

2.如果电脑使用 无线网 连接到因特网
手机端应该输入IP地址是 无线网卡的IP(选择其中一个IPV4即可)。

至此,可以使用手机进行访问了

完美完成手机端访问电脑本地开发的移动项目。

手机上访问angular移动项目的更多相关文章

  1. vue-cli 手机上浏览自己的项目

    首先我们需要更改config文件 拿我这个项目举例子,config文件下的index.js内的dev下的host需要更改为自己的电脑IP 其次,重点来了,我们需要更改路径,细节的为什么我还解释不来,简 ...

  2. 将电脑中编写的app网页放到手机上访问

    http://jingyan.baidu.com/article/3065b3b6e5becdbecff8a4d5.html 1.在控制面板-管理工具找不到IIS,则先在程序-打开或关闭window功 ...

  3. 调试手机上网页 (断点 console timeline 选择dom)

    用手机看网页,越来越多,手机app套个webview的也很多,那该如何调试手机上的页面了?比如 断点,选dom,console,控制台输出,查看内存,== 嗯,万能的的chrome和safari还是帮 ...

  4. 手机通过Charles用线上域名访问PC本地项目

    最近调试微信公众号,由于微信授权需要线上正式环境的域名,笔者想把手机公众号网页重定向到PC本地localhost调试. 该方法通过Charles代理转发,适用所有需要域名重定向的场景,例如手机通过在线 ...

  5. 项目部署到tomcat,浏览器能够访问,手机不能访问。

    问题:有这样一个问题,把项目部署到tomcat上,浏览器能够访问,但是手机不能访问. 解决:在 tomcat中找到conf文件夹,然后找到web.xml

  6. 在Intellij上开发项目发布到tomcat时,同一个局域网内的其他机子访问不到自己电脑上tomcat中的项目,只能本机访问

    在Intellij上开发项目发布到tomcat时,同一个局域网内的其他机子访问不到自己电脑上tomcat中的项目,只能本机访问 问题描述:在Intellij上开发项目发布到tomcat时,同一个局域网 ...

  7. 我手机上常用的app和常访问的网站

    ====常用======Opera Mini browser 浏览器(版本26.0.2254.117241以上) 老版本7.7最最经典, 但该版本在新的安卓手机上总有部分区域显示空白. 现在的 Ope ...

  8. NFC手机上基于软件的卡模拟 重大利好还是安全噩梦?(转)

    Software Card Emulation in NFC-enabled Mobile Phones: GreatAdvantage or Security Nightmare? Michael ...

  9. GitHub上优秀的开源项目(转载)

    转载出处:https://github.com/Trinea/android-open-project 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.A ...

随机推荐

  1. Python变量和字符串详解

    Python变量和字符串详解 几个月前,我开始学习个人形象管理,从发型.妆容.服饰到仪表仪态,都开始做全新改造,在塑造个人风格时,最基础的是先了解自己属于哪种风格,然后找到参考对象去模仿,可以是自己欣 ...

  2. Nginx 模块 - ngx_http_rewrite_module

    原文地址 ngx_http_rewrite_module 模块用于通过 PCRE 正则表达式改变请求 URI,返回重定向并可以有条件地选择配置. break.if.return.rewrite 以及 ...

  3. Altium Designer(AD)使用笔记

    在PCB中间打洞,螺丝孔等 制作PCB螺丝孔 1 在Keepout层首先绘制一个圆形(矩形): 2 在绘制PCB时,选中该图形,Tool>>Convert>>create bo ...

  4. linux常用命令介绍

    参考博客: https://www.cnblogs.com/caozy/p/9261224.html 学前理论 linux主要特征 :一切且文件(目录.硬盘等都是文件):硬件都在/dev 目录,如硬盘 ...

  5. JS正则表达式校验金额

    //任意正整数,正小数(小数位不超过2位) var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/; var num = ...

  6. 关于Nuget包安装之后再卸载,找不到dll的问题

    场景: 在nuget上安装了FFTW.NET,自动的安装一堆其依赖的dll,那些dll都是donet自带的.再卸载这些dll的时候,项目可以生成成功,就是跑不起来.提示如下: 解决方案: 经过排查发现 ...

  7. 20190825 On Java8 第十三章 函数式编程

    第十三章 函数式编程 函数式编程语言操纵代码片段就像操作数据一样容易. 虽然 Java 不是函数式语言,但 Java 8 Lambda 表达式和方法引用 (Method References) 允许你 ...

  8. Pikachu漏洞练习平台实验——越权漏洞(八)

    1.概述 由于没有对用户权限进行严格的判断 导致低权限的账号(比如普通用户)可以去完成高权限账号(比如超管)范围内的操作 水行越权:A用户和B用户属于同一级别用户,但各自不能操作对方个人信息.A用户如 ...

  9. centos7 nginx完整支持thinkphp pathinfo模式开启方法

    thinkphp运行在linux+nginx,如何开启pathinfo模式,我是完整测试过了,没问题的,在thinkphp配置文件 开启    'URL_MODEL'   =>  1,   1代 ...

  10. Ioc和DI之间的关系(依赖注入的核心概念)

    1.开篇闲话 由于之前做的很多项目都没接触到这个,后来到了另一个公司,他们的代码结构是基于领域驱动设计的,其中里面的对象都是通过依赖注入方式(Sprint.NET)实现的,也大致了解了哈,在网上搜了些 ...