vue移动端项目在手机端查看效果方法

最新推荐文章于 2022-09-24 18:33:46 发布
最新推荐文章于 2022-09-24 18:33:46 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43755104/article/details/108123451
版权

文章目录

场景描述

有个移动端项目，我需要在自己手机上查看效果，怎么办、

第一

手机与电脑在同一wifi下

第二

找到config文件夹下的index.js文件，打开后，将host的值改为你本地的ip，保存后重启项目

第三

输入ip和端口号打开项目

第四

将地址复制，使用二维码转换工具（草料二维码）生成二维码后，使用手机扫描，就可以查看了
也可以直接用微信发给同事直接点击查看

RDSunday
关注
专栏目录
vue-vant-mobile:vue结合vant的移动端项目
05-22
Vue-vant-Mobile 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue移动端项目如何使用手机预览调试
热门推荐
Lynn
04-12 2万+
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，...
移动端app效果开发中在手机端查看的方法
qq_43729779的博客
03-06 603
将localhost:8080 中的 localhost 改成 自己电脑的ip地址,同时手机和电脑在同一个局域网内. 查看ip地址方法: window + r 输入cmd 回车输入ipconfig
（app端）Vue开发的项目在手机上实时查看效果
qq_38969618的博客
02-03 673
电脑上先安装360wifi发射器→npm run serve后控制台出现的network网址（不是本地那个网址）→先用手机连接上电脑的wifi热点→在手机浏览器中直接访问network网址即可。 ...
Vue、或使用虚拟主机 在手机上查看效果的方法
yiyueqinghui的博客
02-14 981
Vue在手机上查看效果的方法 修改vue中config->index.js中的host如下 1,如何查看本机ip 在命令行中输入 ipconfig, 即可显示本机ip(ipv4) 2,上方host处，可直接写0.0.0.0，表示监听任意ip 也可直接写成本机的ip 手机与电脑连接相同的网络，用手机打开电脑上该网页的地址即可访问。 如果不可访问的话，可能是防火墙的原因，关...
mobile-web:Vue移动端案例项目
04-15
《Vue移动端案例项目详解》 在移动互联网时代，前端开发技术日新月异，Vue.js作为一款轻量级、高性能的前端框架，以其简洁的API和强大的功能深受开发者喜爱。本项目“mobile-web”就是一个基于Vue.js的移动端案例，...
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码.zip
05-05
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作...
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
vue移动端实现手机左右滑动入场动画
10-16
在Vue移动端应用中，实现手机左右滑动入场动画可以提升用户体验，使得页面切换更为生动有趣。下面我们将详细探讨如何在Vue中实现这一功能。 首先，我们看到`<template>`部分包含两个`<transition>`组件，它们分别...
vue项目在手机上查看输出信息
xc9711的博客
06-16 765
在vue项目中，你没办法通过像电脑一样，按F12可以很方便快捷的查看写的代码的结果和信息，在手机上你想这样的话需要借助于组件。 其实我已经用这个方式查看vue项目的输出信息很久了，但是一直有很多事情耽搁住，直到现在才想起来；那么，这个文章就来教大家如何引入吧 引入 第一步 使用 命令安装vconsole，安装完之后可以看到自己项目的package.json有它的信息 第二步 在引入vconsole 第三步 其实没有第三步了，做完这些，你就可以正式在手机上看到一个图标 可以看到一个vConsole图标 点开
商城手机端vue仿淘宝商品详情demo
05-19
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
jquery实现移动端点击图片查看大图特效
11-22
本文的需求很简单：点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css"> .exampleImg { height:100px; cursor:pointer;} </style> [removed]
学习日记--vue使用手机查看页面
轻风细雨_林木木
04-13 424
步骤： 1.进入配置文件 2.查出电脑配置ip ifconfgi 3.重启vue 4.输入ip和端口号，就可以访问了 192.168.10.104:8080
vue项目如何通过电脑连接手机热点在手机上访问
sinat_40697723的博客
03-12 1555
首先当然得让电脑连上手机热点，使他们处于同一个局域网中； 去命令行工具输入ipconfig获取电脑的ip，如下图所示IPv4地址就是本机电脑的IP 3. 接着去vue项目中修改配置项，步骤如下： 去congif目录下的index.js文件 将里面的host设置为本机ip即可。 最后修改完成以后重启服务器：npm run dev即可。 ...
用vue+vant框架写手机端
yjg9898web的博客
08-04 3443
用vue+vant框架写手机端了解vue+vant1.什么是vue2.什么是vant安装如何安装vue/cli(脚手架)插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 了解vue+vant 1.什么是vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框
Vue使用Vant搭建移动端开发工程
qq_33771698的博客
11-04 2409
1. 使用vue/cli创建项目（安装vue/cli） vue create my-project 创建过程步骤如下： Manuually select features 选择 Babel（es6语法编译器） Router（路由模块） Vuex（全局状态管理） Linter / Formatter（语法格式规范校验 ESLint + Standard）CssPre-processors（css/sass/less处理器）等个人定制 2. 项目创建完成 引入Vant npm i va...
vue-vant开发移动端项目如何在手机上查看效果
seeeeeeeeeee的博客
08-11 1412
首先，启动项目，npm run serve 然后看一下有没有Network这一条，如果有，那就直接把这个网址在手机上找个浏览器输入就可以看到了。 如果你是更改过启动项，用的是“npm run dev”，则在“dev”中添加 --host 192.168.x.x。 然后还是一样，手机打开浏览器输入这个网址 那么ip地址怎么找呢 步骤一：cmd 打开命令运行符，输入“ipconfig”查询本地 IP；(cmd就是你点开桌面菜单后直接键盘输入cmd就会出来的一个命令行工具) 步骤二： 将ipv4地址复制下来
vue项目怎么在手机查看
豪先生的博客
09-24 3961
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
vue 移动端项目如何在手机上演示
HaushoLin的博客
09-28 1641
打开cmd 输入ipconfig 找到ipv4 对应的IP地址 复制到vue项目中的package.json中的scripts --> serve的值vue-cli-service serve 后面加上 --host和你的ipv4地址，在npm run serve就可以把链接复制在手机上查看了，手机就可以访问本地电脑的项目了 在package.json文件中添加本地ipv4地址 "scripts": { "serve": "vue-cli-service serve --host 192.16
vue pc端怎么模拟移动端项目怎么获取手机的经纬度
最新发布
04-20
为了模拟移动端项目，您可以使用Chrome浏览器的开发者工具来模拟移动设备的屏幕大小和触摸事件。关于如何获取手机的经纬度，您可以使用HTML5的Geolocation API来获取用户的位置信息。具体实现方法可以参考以下链接：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RDSunday

爱，就供养；喜欢/受益，就打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值