手机上访问angular移动项目
<p>要实现手机访问本地开发的移动端项目，首先做到两点：</p><p>1、本地打开的项目可以使用本地ip访问</p>
<p>2、手机和电脑同时处于一个同一个局域网中（手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接）</p>
<p>如果做到以上两点，那么恭喜你，就可以直接使用电脑ip在移动端访问了。</p>
<p> </p>
<p>因为现开发项目是angular + ionic项目，所以以下设置及开发均以angular项目为基础进行设置。下面先来解决第一个难题：</p>
<p>一、angular项目配置可同时使用localhost和本地ip访问，步骤如下：</p>
<p>step1: 找到此文件“node_modules/webpack-dev-server/lib/Server.js”，按照下图修改</p>
<p>将return false 修改为return true;</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914094221633-1034019805.png"></p>
<p> </p>
<p>step2： 修改配置文件package.json</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914094351450-430718118.png"></p>
<p> </p>
<p> </p>
<p> step2: 重启项目</p>
<p>到此为止就可以直接使用本机IP:4200或者localhost:4200访问项目啦。</p>
<p>现在第一个问题问题解决了，那么接下来看看如何通过移动端访问本地angualr项目。上面已经说了，需手机和电脑在同一个局域网内，介绍了三种方法，现仅以电脑开wifi给手机连接为例进行讲解，其他两种方式设置类似。</p>
<p> </p>
<p>二、手机连接电脑测试本地开发的移动端页面</p>
<p>step1:关闭电脑防火墙</p>
<p>或者80端口允许连接;<br>设置方法:<br>打开控制面板—Windows防火墙—高级设置—入站规则—新建规则—端口—输入80</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914094850427-1434818014.png"></p>
<p> </p>
<p> </p>
<p> step2: 开启电脑热点</p>
<p>在电脑右下角网络设置区域，右键 =》打开 “网络和Internet” 设置，打开如下页面：</p>
<p> <img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914100301198-1703502763.png"></p>
<p> </p>
<p> </p>
<p> 开启之后，就可以字已连接设备地方区域看到连接的移动端手机</p>
<p>step3: 检查电脑是否可以连通手机</p>
<p>命令提示符 cmd -》（下图是连通的）<br>ping 分配的IP</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914100541486-2059699067.png"></p>
<p> step4: 如何获取电脑ip </p>
<p>命令提示符 cmd -》ipconfig</p>
<p> 1.如果电脑是使用 有线网 连接到 因特网。<br>手机端应该输入的IP地址是 以太网网卡的IP（选择其中一个接口，另一个是备用的）</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914100632845-1166616179.png"></p>
<p> </p>
<p> 2.如果电脑使用 无线网 连接到因特网<br>手机端应该输入IP地址是 无线网卡的IP（选择其中一个IPV4即可）。</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914100926012-536673340.png"></p>
<p> </p>
<p> 至此，可以使用手机进行访问了</p>
<p><img src="https://img2018.cnblogs.com/blog/980958/201909/980958-20190914101132014-621674480.png"></p>
<p> </p>
<p> 完美完成手机端访问电脑本地开发的移动项目。</p><br><br>
来源：https://www.cnblogs.com/x123811/p/11518471.html
頁:
[1]