vue移动端真机测试

跨设备调试指南
最新推荐文章于 2023-03-26 23:40:02 发布
原创 最新推荐文章于 2023-03-26 23:40:02 发布 · 522 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在PC和手机间进行跨设备调试的方法，通过修改package.json文件中的dev配置并运行npm dev命令启动项目，然后在手机上访问PC的IP地址来实现。此过程适用于处于同一局域网内的设备。

1、打开命令提示符工具，输入ipconfig查看ip地址

2、打开package.json，修改scripts下的dev

3、npm run dev运行 项目

4、当pc和手机处于同一局域网，用手机访问ip地址，如：http://192.168.1.102:8080/#/

Vue项目的真机测试
zl13015214442的博客
03-01 1262
在命令行运行ifconfig（Linux系统）或是ipconfig（Windows系统），我们要获取到当前机器的一个IP地址，可以看到，当前这台机器的内网的一个IP地址为192.168.43.50： 在浏览器里，我们输入192.168.43.50，也是指的这台机器，他的8080端口和我们的localhost的8080端口是一样的，但是却访问失败，原因是我们前端的项目是通过webpack-dev...
vue项目——ipad采集语音(移动端真机调试)
qq_40556950的博客
11-07 747
目前在做一个移动端网页，主要是在ipad上面使用，项目是用vue-cli3搭建的。当我在WebStorm中运行了之后，现在手机(或者ipad)上面试一下效果。找了很多方法都比较麻烦。想起之前一个简单的方法： 1.首先确保你的手机和电脑使用的同一个网络（局域网） 2.打开package.json文件，在启动命令后加上"–host 0.0.0.0"这段话 2.运行之后，如果电脑是windows系统的...
vue移动端的真机测试
关注最新技术问题并持续维护更新
07-17 1875
Vue2.0     在 package.json 文件里加入 --host 0.0.0.0，需要重新运行 npm run dev { "name": "", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": { ...
Vue项目在真机测试
weixin_33670713的博客
08-09 206
一：修改config 找到config文件夹下的index.js文件并修改为: module.exports = { 　　　　　　　　　　dev: { 　　　　　　　　　　　　host: '0.0.0.0' // 原为: hotst: 'localhost' 　　　　　　　　　　　　　}　　　　　　　　　　 } 二、查询本地IP地址 ctrl+r输入cmd回车，打开命令提示符...
vue 真机测试
周家大小姐
12-09 589
需要用到的网址:http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/  把config中的index.js文件host对像属性改成0.0.0.0,后续在随意的电脑上都能查看项目,只要在浏览器把四个0改成你自己的ip就可以  输入命令(安装调试工具):  npm install -g weinre 启动的时候输入: weinre ...
vue移动端项目真机测试
笑望灬星辰
06-11 802
vue移动端项目真机测试 测试阶段为内网环境 将项目启动的 原host localhost 改成 本机内网ip 获取内网ip win + R 输入 cmd 在 然后再输入 ipconfig 回车 这样就可以在手机上测试项目啦 但是接口要记得叫后端处理好跨域哦 ...
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
移动端真机上样式失效问题解决方案之deep的深入理解
qq_41801484的博客
06-19 2920
这篇文章主要讲述由于**嵌套/deep/**的错误用法而导致的移动端真机样式失效问题，
移动端开发08 移动端真机调试
多啦的博客
11-29 403
移动端开发08 移动端真机调试+抓包
Vue移动端开发问题纪要
MasonChen的专栏
10-25 478
Vue移动端开发问题纪要 1、UC浏览器兼容性问题 现象 在部分Android机型中的UC浏览器下访问，出现白屏现象 解决 之前遇到过类似的问题，第一反应应该是babel-polyfill的问题，要么没有引入要么是引入的方式不对。 看了一眼 main.js 中babel-polyfill的引入位置，之前并不是在最顶部的位置引入的，于是调整到最顶部的位置 import 'babel-po...
记录下hbuilderX+vue开发app 真机调试的问题
01-03
原由 找了半天官方的文档也没找到几个靠谱的文档，最后还是慢慢摸索出来的 解决： hbuilderx连接手机调试 一.找到hbuilderx的安装目录并找到plugins 二.找到launcher 三.找到tools目录 四.找到adbs并复制地址 五.添加到系统变量path window+R 输入：set path = %path%;D:\soft\HBuilderX\plugins\launcher\tools\adbs;//追加变量 再次输入path查看系统变量 六.连接到模拟器服务器 输入：adb connect 127.0.0.1:5555//5555为端口号 七.附
Vue项目真机测试
尘生杜若
02-20 898
1：获取电脑网络ip地址**（注意：手机端与电脑端需在同一无线局域网下，可电脑连接手机热点）** 命令行输入：ipconfig 回车后获取到ip地址： 如图中的IPv4地址:172.20.10.3 2：将获取到的地址替换项目中的http：localhost：8080地址 具体步骤：打开项目中的package.json文件，将红色部分代码段 "scripts": { "dev": "web...
关于移动端 真机测试
chaixing1的博客
03-26 161
移动端 真机测试
vue项目手机真机预览和调试
黑客与画家
12-04 6268
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来；但是如果要上线上每次都要打包所以很不方便，给大家介绍一下我的方法： 1.** 首先找到 config 下面的index.js ** 如图： 2. 找到host:‘localhost’ 跟换成IP 的方式 ：如图 我的是配过跨域的所以代码跟你们的可能有点不一样，不过只要找准host:‘localhost’ ...
vue移动端项目如何在真机测试
giao序员
11-25 1699
通常大家在写移动端项目的时候都想在自己手机上测试一下看一下效果确保无误后在上线，虽然许多浏览器都有模拟手机功能但不如真机来的实在那如何测测试呢请看下面 第一步打开搜索栏输入cmd命令打开窗口 第二步输入ipconfig找到本机ip地址 第三步找到项目下的config文件下的index.js下的host：修改为本机ip地址 然后重新启动项目npm run dev 把项目地址复制下使用草料二维码生...
vue真机调试
前端kk的博客
04-04 2157
修改以下文件         修改以下文件   
vue移动端真机调试
chaosama的博客
08-14 1219
原来以为是不同网络不穿透的问题，后来发现是固定了process.env.PORT为localhost了，在config文件夹里面的index.js 把dev里面的host改为当前ip就OK了 dev：{ host: '172.16.1.125', port: 8080, } 缺点就是本地也不能localhost访问了，需要输入ip地址还能访问 ...
vue真机调试_vue_真机调试页面
weixin_39894255的博客
12-19 322
使用vue开发也有一段时间，是说我太懒了，还是说太懒了。得总结总结的。之前在开发的时候都是，npm run build把页面打包后再上传到代码库上线用手机看页面效果。样式调整，嗯，很麻烦很傻的。今天决心要解决这个问题，的确很简单。技术段：下面这段文字也是别人家的，还是太懒了。我用的是vux起的一个项目(移动端，基于vue的)，因为是移动端的，需要在手机上测试，发现用http://localhost...
H5 vue 真机调试（vconsole）
yan_gogo的博客
06-13 1913
1. npm install vconsole 2.main.js 引入 import Vconsole from 'vconsole' let vConsole = new Vconsole export default vConsole 3. npm run dev 运行右下方有个（vconsole）按钮
vue项目真机安卓环境测试
最新发布
03-27
好的，用户想在真实的安卓环境中测试他们的Vue项目。让我先看看用户提供的引用内容，看看有没有相关的信息可以利用。 首先，引用[1]提到使用vConsole进行移动端调试。vConsole是一个不错的工具，可以在移动端显示...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值