手机访问本地angular项目

最新推荐文章于 2023-08-18 17:46:14 发布
原创 最新推荐文章于 2023-08-18 17:46:14 发布 · 2.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular #手机访问本 #ipconfig #防火墙

本文详细介绍如何通过手机浏览器访问同一WiFi下电脑上运行的Angular项目。步骤包括连接设备到同一网络，查找并使用电脑IP地址，启动Angular项目并指定IP，最后在手机上输入特定URL访问。解决常见问题如防火墙阻止访问。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、手机和电脑连接同一个wifi

二、电脑上win+R->cmd回车->输入ipconfig查看电脑ip(可能会有好几个ip，一般选择下面这个)

三、启动电脑上的angular项目：ng serve --host 192.168.95.79 --open    指定ip打开

(公司项目中，加上--proxy-config proxy.conf.json，即ng serve --proxy-config proxy.conf.json --host 192.168.95.79 --open)

四、手机上输入http://192.168.95.79:4200访问即可，因为angular默认端口为4200，如果电脑是8080的项目就访问8080

 

注：如果出现手机访问不了，很可能的一个原因是电脑防火墙的原因，可关闭电脑防火墙再试，

win10如何关闭防火墙见https://blog.youkuaiyun.com/liucai1018/article/details/99622670

Angular项目的启动过程
Baron
10-21 1471
大家都知道Angular有很多的优点，包括： 横跨所有平台 学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。 速度与性能 通过Web Worker和服务端渲染，达到在如今(以及未来）的Web平台上所能达到的最高速度。 Angular让你有效掌控可伸缩性。基于RxJS、Immutable.js和...
手机访问本地开发的angular9项目
zyf_baby的博客
11-05 508
这里写自定义目录标题一、环境 & 版本二、使用方法1. 同一局域网2.启动angular项目3.重点 需求：本地开发移动端项目时，有时候需要真机实时测试，这时候要是手机能访问本地开发的angular项目就好了，也可以发给小伙伴一块测试，经过几天的摸索，终于实现了，现在发给小伙伴们。 一、环境 & 版本 电脑：mac 版本：angular9 二、使用方法 1. 同一局域网 首先，手机和电脑必须在同一局域网，简单就是电脑和手机需要连接同一个wifi 注：电脑用网线貌似不行哈，需要连接wifi
怎么用手机看本地开发的项目？
weixin_34205826的博客
03-07 376
利用 ”草料生成二维码”，比如我的项目路径http://localhost:8080/#/ssss 1：找到自己电脑的IP地址， linux下输入ifconfig，windows下输入IPConfig就可以看到IP啦 2：把ip地址改进开始的地址http://192.168.191.1:8080/#/ssss 3:复制地址放到草料二维码生成器里，生成，就有一个二维码了； 4：手机微信扫...
手机上访问angular移动项目
weixin_30487317的博客
09-14 588
要实现手机访问本地开发的移动端项目，首先做到两点： 1、本地打开的项目可以使用本地ip访问 2、手机和电脑同时处于一个同一个局域网中（手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接） 如果做到以上两点，那么恭喜你，就可以直接使用电脑ip在移动端访问了。 因为现开发项目是angular + ionic项目，所以以下设置及开发均以angul...
手机查看或让别人查看自己的本地项目（内网穿透）方法
dreamy_wx的博客
05-21 5390
在本地开发项目时，只能供我们自己电脑的浏览器访问，或者处于同一个wifi下的手机访问。如果想让别人也访问到我们的本地服务器，让别人使用手机就能查看我们的项目效果，这里就需要用到内网穿透，内网穿透就是别人通过外网能够访问到我们本地的服务器。 下面介绍自己用到的内网穿透方法 一、使用uTools（很好用的一款工具），搜索内网穿透 下载链接: https://u.tools/. 1）点击黑色logo进入插件中心 2）搜索或到开发中查找内网穿透并安装插件 3）本地创建服务器并运行 这里端口号我设置.
手机怎么访问电脑的本地的移动端项目？超级简单，这篇文章直接搞定
最新发布
xiaoxiaoxin1128的博客
08-18 3234
出现该问题主要是因为你电脑的防火墙将某些端口号的 htpp 的网络访问协议给屏蔽掉了（一般的电脑操作系统是默认不屏蔽 80,8080 一些常用的端口的），所以你可以直接将自己的电脑的防火墙全部关闭。作为一名开发或者运维的同学，平时都在电脑上F12开启手机适配模式，去调整代码和样式，有时候出于更严谨的方式，我们需要使用真机来调试样式，由于代码在本地的环境，没有上传到服务器，所以我们需要，手机怎么去开启访问本地的移动端项目呢？#手机怎么访问电脑的本地的移动端项目。#第二步：查看的电脑的IP。
手机访问电脑localhost,测试开发的项目
baidu_27605213的博客
04-12 2146
手机访问电脑localhost测试开发的项目 手机和电脑处于同一局域网中； 最简单的方法：电脑连接手机热点即可。 电脑上按 WIN + R ，输入 cmd， 在弹出的DOS窗口输入ipconfig, 找到如下图的地址： 手机输入该地址, 即可访问电脑，注意别忘了加上端口号。 ...
Angular项目开发与构建流程详解
代码脚手架部分说明了Angular CLI的`ng generate`命令（或简写为`ng g`），这是一套用于自动生成Angular项目中常见文件和代码的脚手架工具。`ng generate component`用于创建新的组件，而其他选项如`directive|pipe|...
Angular图像旋转器项目实现微调器显示
在实际部署之前，开发者通常会在本地开发环境中使用Node.js、npm（Node.js的包管理器）和Angular CLI（Angular的命令行工具）来开发和测试应用。 - 在部署时，开发者可能将构建好的静态资源（HTML、CSS、JavaScript...
SSM框架与Angular结合实现手机品牌管理
在详细探讨“ssm+angular+maven”这一技术组合的知识点之前，首先要明确每个组成部分的基础概念及其在项目开发中的作用。 SSM，即Spring、SpringMVC和MyBatis的缩写，是一种在Java Web开发中常见的技术框架组合。...
Vue移动端项目实现使用手机预览调试操作
10-15
4. **生成二维码**：现在，你需要将修改后的本地服务器地址转换为可扫描的二维码，以便手机访问。可以使用在线二维码生成工具，如`https://cli.im/`，输入你的本地IP地址加上端口号（通常Vue项目默认使用8080端口）...
手机端Web项目开发
11-06
搭配IndexedDB或Web Storage，可以实现数据的本地存储，使用户在离线状态下仍能访问部分内容。 六、性能优化 手机端Web项目的性能优化是另一个关键点，包括减少HTTP请求、压缩资源、优化图片、使用懒加载等策略。...
手机访问Angular 项目 绝对有效！！！
yinyueyu007的博客
06-08 206
步骤： 1.关闭防火墙 位置：控制面板\系统和安全\Windows Defender 防火墙\自定义设置 2.配置package.json { "name": "Test", "version": "1.2.0", "scripts": { "ng": "ng", "start": "ng serve --host 10.168.1.16 --open --proxy-config proxy.conf.json", "build": "ng build --prod=true",
运行Angular项目后自动打开网页
wml00000的博客
09-12 2591
启动Angular项目时通常输入 ng server命令，执行完之后还需要在浏览器输入localhost:4200,真的是麻烦。只要将命令换成 ng serve --open  然后等着就行了，舒服多了。...
使用ip地址打开angular的运行项目
zhaolifang_28的博客
02-15 523
启动项目：ng serve --host 0.0.0.0。访问电脑的ip地址，ipconfig。
手机上访问Angular项目 绝对可用！！！
yinyueyu007的博客
06-08 172
步骤： 关闭防火墙. 地址：控制面板\系统和安全\Windows Defender 防火墙 配置package.json 文件. 确认是否在一个网络下，如果不是请开热点. 结尾： 输入 http://10.138.1.16:4200 就可以访问啦.
解决angular项目只能用localhost，不能用本机ip访问
weixin_39755884的博客
11-11 4480
今天想把angular的服务部署在腾讯云公网服务器上，在我的防火墙都关闭的情况下，发现只能用localhost和127.0.0.1访问我的项目，不能用我的内外网ip访问项目 于是乎，就想着是angular的内部设置问题了。 在网上找了许多文章，直到这篇文章最终解决了我的问题。贴出来让大家也少走点弯路： 具体步骤如下 第1步：找到“node_modules/webpack-dev-server/lib/Server.js”，将checkHost方法的返回值改为true，如下图所示 第2步：进...
angular2.0配置同时使用localhost和本机IP访问项目
Frank_Good的专栏
01-18 3825
第一步：找到此文件“node_modules/webpack-dev-server/lib/Server.js”，按照下图修改   二、修改配置文件package.json，见下图   三、在项目下，命令行运行 npm start，启动项目。 四、现在可以用本机IP:4200或者localhost:4200访问项目
angular路由path:' '，与path:'**'的区别
liucai1018的博客
10-08 4185
有一个路由配置如下： const routes: Routes = [ { path:'home', component:HomeComponent }, { path:'news', component:NewsComponent }, { path:'', redirectTo:'home', pathMatch:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值