手机端和电脑端打开可以看到同一vue项目

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

#手机端 #vue #电脑端

本文介绍如何通过修改ipconfig、package.json及config文件，实现电脑与手机间同步预览Vue项目，确保开发过程中多设备一致性的方法。

1，ipconfig查询电脑连接的手机热点或者是wifi的地址：
在这里插入图片描述
2.package.json在"scripts"里"dev"添加你的地址：
–host 地址
在这里插入图片描述
3.在config文件下修改host，这样手机端才可以打开
在这里插入图片描述
在这里插入图片描述

这样手机端和电脑端打开同一网址都是可以看到vue项目的

Vue移动端项目实现使用手机预览调试操作
10-15
在开发Vue移动端项目时，确保应用在手机设备上...总之，手机预览和调试对于Vue移动端项目开发至关重要，通过连接同一网络、获取和配置IP地址、生成二维码、重启项目以及使用远程调试，可以实现顺畅的跨设备开发体验。
一个Vue项目同时包含PC端页面和移动端页面
weixin_43239880的博客
08-21 3346
又因为移动端和pc端的设计页面差别过大，导致我们无法使用响应式的方式来处理，所以我们需要分别写两个页面来对应移动端和pc端的页面(这两页面都是在同一个vue项目)其实也可以用路由的方式来处理，将移动端和pc端都写成一个路由，如/pc和/mobile,然后我们在/search页面判断设备，如果是手机则在mounted中跳转手机的页面，不是则pc端。因为我们pc端的项目是已经做了响应式适配的，不需要再进行适配了，但是移动端的话还是需要适配的，不然跟着UI的750px的设计稿不适配，会有很大的问题。
Django | Django项目在同一局域网下手机可访问
猫天意的博客
04-01 1595
Django项目在同一局域网下手机可访问
怎么让手机和电脑处于一个局域网 电脑本机发布的项目（非阿里云发布），怎么让手机也可以访问电脑发布的项目
NicolasLearner的博客
08-13 3818
当我们在电脑上发布项目的时候，想测试一下在手机上浏览项目，布局会不会乱了。 第一、想要电脑上发布的项目，适应任何浏览器，任何分辨率的电脑： 1、用BootStrap来做前端页面 2、任何css样式都要用相对的，如87%,不是67px;不要用像素px，而是用百分比 第二、怎么让手机和电脑处于同一个局域网 1.电脑连接的是无线网，记住不是通过宽带、有线连接的； 2、例如，电脑连接的无线网网名是TP_LINK_D849 3、那么手机也应该连接的无线网也是TP_LINK_D849 4、打..
如何本地局域网下访问vue项目？【手机和电脑均可】
qq_34814495的博客
10-20 1594
在学习vue的时候，在电脑上跑起来，总喜欢还能在别的电脑或者自己手机上能看见，这就需要小小的配置一下 win10设置 需要配置一下电脑的防火墙，把所需的端口（如：8080）打开。 设置方法如下： Windows 10 ，搜索“控制面板”，打开，Windows 7 可以直接在开始菜单打开。 点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。 规则类型选择“端口” 下一步“特定本地端口”填 8080-8088 （此处是一个 IP 段，因为如果打开多个项目
Vue动态切换PC端与移动端
acheding的博客
10-25 2543
通过监听客户端宽度（clientWidth）的方式来实现动态修改布局及样式。
精选资源
vue项目配置同一局域网可使用ip访问的操作
01-18
此处的”0.0.0.0″可以改成自己的ip，重启项目就可以了 补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目...
基于SpringCloud+vue+element设计的手机端网络购物商城
02-13 1350
本系统利用springboot和mysql技术作为系统的后台，利用vue技术和element ui 搭建系统的前台。前台包括用户前台页面和后台管理页面。 用户前台页面必须满足用户购物的需求，要有购物车、订单、下单和收藏等功能。系统后台管理页面需要对店铺的商品、用户和订单进行管理，同时需要统计店铺的各种销量数据等等。通过本系统可以解决用户可以通过移动互联网不用安装移动应用进行网上购物，同时满足了商家拓展线上销售的渠道。
手机上访问你电脑上的前端项目
最新发布
id9426的博客
08-28 1291
步骤操作内容1️⃣确保电脑上已启动前端项目（如2️⃣查看终端是否打印了或局域网访问地址（如3️⃣如果没有，确保你的开发服务器配置了4️⃣查看电脑的局域网 IP（如，通过ipconfig或ifconfig5️⃣确保手机和电脑连的是同一个 Wi-Fi6️⃣http://<电脑IP>:<端口>，如7️⃣成功访问！你可看到与电脑一样的页面，可用来预览、调试响应式布局等。
同一网络下进行前后端联调：前端视角
2401_85080888的博客
08-16 1193
在我们的日常开发中，前端在自己的电脑上写页面，后端也在自己的电脑上跑服务，或是需要用手机测试移动端页面与后端的交互——这些都离不开“同一网络下联调”。相比于本地单机联调，跨设备联调多了一层网络配置的考验，但只要掌握核心逻辑，就能轻松打通前后端数据通路。本文将从环境准备、核心步骤、问题排查到进阶技巧，带你完整走一遍同一网络联调的流程。
vue项目实现pc端和手机端屏幕自适应
weixin_72459765的博客
10-28 6910
vue项目实现pc端和手机端屏幕自适应
vue 判断移动端、pc端
weixin_30814223的博客
04-04 1738
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。 先写个方法： //APP.vue isMobile() { 　　let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Androi...
手机想调试pc端的vue项目（有端口号的项目均适用）
m0_55315930的博客
03-09 993
本地运行的pc端项目，想要适配手机端，想看查看一下项目在手机端的界面样式。可以采用这种办法。
vue项目如何通过电脑连接手机热点在手机上访问
sinat_40697723的博客
03-12 1700
首先当然得让电脑连上手机热点，使他们处于同一个局域网中； 去命令行工具输入ipconfig获取电脑的ip，如下图所示IPv4地址就是本机电脑的IP 3. 接着去vue项目中修改配置项，步骤如下： 去congif目录下的index.js文件 将里面的host设置为本机ip即可。 最后修改完成以后重启服务器：npm run dev即可。 ...
VUE-CLI项目同一局域网手机通过IP访问电脑本地项目
daxiangya6845的博客
08-27 408
0.找到config文件夹下的index.js文件，修改host内容为hots:'0.0.0.0',此时重新运行项目，则其他设备可以通过ip进行访问 1.首先确保电脑防火墙或者杀毒软件关闭，因为大多数情况都是这样造成的 2.接下来再允许80或者一些特殊的端口访问权限 3.点击下一步输入自己想要访问的端口好号 其次，电脑开启热点 然后用手机连接该热点，WIN+R...
vue3移动端pc端兼容
m0_61134931的博客
06-13 4910
1.router文件 index.js配置路由表，把移动端和PC端路由表拆分出来。2. appWeb(PC端代码) appMobile(移动端代码)
vue中实现一个项目里兼容移动端和电脑端
hhb442的博客
03-12 3615
这种方案不是响应式方案，而是同一个项目（同一个ip和端口）移动端和pc端展示不同的页面，考虑到移动端的功能可能只是pc端的简化，所以是重新写移动端的界面（可能只是样式的调整，也可能是功能的简化）从上面的路由可以看出如果访问 ip:port 默认进的是pc端路由，那么如何让移动端访问 ip:port 进入 /mobile下的路由呢，首先只需要移动端路由和pc端路由不同，如下，移动端和pc端路由不同。的mounted()钩子函数中做如下判断，进行路由跳转。
vue页面同时适配手机端和PC端
MW
08-19 4133
vue页面同时适配手机端和PC端
现在有一个其他人提供的vue3+vite项目 在我电脑上改如何运行
04-18
另外，用户可能有疑问如何访问本地项目，比如在手机端查看，这时候可能需要参考引用[2]的内容，指导用户如何通过IP地址在局域网内访问，但用户当前的问题可能暂时不需要，但可以作为扩展信息提及。 最后，常见问题...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值