vue项目如何在手机上做测试调试

最新推荐文章于 2024-08-20 16:18:47 发布
最新推荐文章于 2024-08-20 16:18:47 发布
阅读量2.1k 收藏 2
点赞数 3
分类专栏： vue项目调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45108907/article/details/104377647
版权

在这里插入图片描述
1，在config文件夹下的index.js的host地方，改成电脑的ip地址
2，可进入cmd命令，获取本地的IP地址
在这里插入图片描述

3，重启一下项目，vue-cli2使用npm run dev 即可
4，可以使用二维码，微信扫一扫调试项目
在这里插入图片描述

5，如果想在手机浏览器中调试，
一，保证在同一局域网下，手机和电脑使用同一个WiFi网络，
二，然后输入ip地址和端口，点击保存即可。成功后可在浏览器中输入http://192.168.100.104:8080/来访问vue项目

weixin_45108907
关注
专栏目录
完美解决通过IP地址访问VUE项目的问题
10-15
确保手机和电脑连接的是同一Wi-Fi，然后就可以在手机上看到你的Vue项目了。 总结一下，解决通过IP地址访问Vue项目的问题，主要步骤包括： 1. 修改`config/index.js`中的`host`设置为`0.0.0.0`。 2. 更新`package....
uniapp华为手机真机测试保姆教程
zmx781284440的博客
03-25 3551
第三步：用数据线连接手机和电脑，然后更改充电选项为文件传输。在系统和更新里找到开发者人员选项，然后在里面打开usb调试。在设置页面搜索HDB，然后打开。第五步：在HBuilderX 中点击运行==》运行到手机或模拟器==》运行到Android App基座，自动会给手机安装一个基座app。第二步：在手机的设置找到关于手机，然后。第四步：给手机安装华为手机助手。如有不懂的地方，留言可帮助解答。下载华为手机助手给电脑安装；连续点击鸿蒙版本选项 7下。允许通过HDB连接设备。
vue移动端真机调试方法
m0_37680500的博客
05-11 4038
最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。真机环境调试起来就非常的不方便，例如：1、无法看到日志信息2、无法实时调试（每次都要打包到线上才可测试）下面教程提供一下移动端的调试方法，仅供学习交流。
Vue项目在移动端调试办法
最新发布
yodoyskts的博客
08-20 321
记录一下有些同学在写项目的时候不可避免的会在移动端展示，但是移动端又无法看到后台的参数和接口调用情况，本篇文章提供一个最简便便捷的办法供大家参考：通过vConsole来调试。引入完成之后重启一下项目就会在项目中出现一个vConsole的标签：如下图。这样在移动端想调试项目的时候点击这个标签就会打开vconsole的调试。当然在发版的时候记得把man.js里的vconsole注释掉哦。第二步：在man.js中引入vConsole。第一步：安装vConsole。
手机想调试pc端的vue项目（有端口号的项目均适用）
m0_55315930的博客
03-09 856
本地运行的pc端项目，想要适配手机端，想看查看一下项目在手机端的界面样式。可以采用这种办法。
vue项目手机真机预览和调试
黑客与画家
12-04 6098
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来；但是如果要上线上每次都要打包所以很不方便，给大家介绍一下我的方法： 1.** 首先找到 config 下面的index.js ** 如图： 2. 找到host:‘localhost’ 跟换成IP 的方式 ：如图 我的是配过跨域的所以代码跟你们的可能有点不一样，不过只要找准host:‘localhost’ ...
网页的Vue项目怎么在手机上面测试
Kratial的博客
09-13 2299
1.修改config文件夹下面的index.js文件 找到host: ‘localhost’,修改为：host: ‘0.0.0.0’ module.exports = { dev: { ...... host: 'localhost', // can be overwritten by port: 8080, // can 2.运行在命令行输入：npm run dev ...
mpvue将vue项目转换为小程序
10-17
开发者需要在小程序管理后台新建项目，并填入获取到的AppID，以便进行手机预览和真机测试。 mpvue框架兼容了Vue.js和微信小程序的生命周期，为开发者提供了更多的灵活性和控制能力。在mpvue中，页面组件的生命周期...
vue项目在安卓低版本机显示空白的原因分析(两种)
12-09
在开发Vue.js应用时，可能会遇到一个问题，即项目在安卓低版本手机上显示空白。这个问题通常与JavaScript的兼容性有关，因为Vue项目普遍使用ES6语法，而旧版安卓设备可能不支持这些新特性。本文将分析两种可能导致此...
vue商城项目（购物网站）
06-07
JavaScript 和 ECMAScript 是Vue.js 的基础，JavaScript 是前端开发的主要语言，而ECMAScript 是其标准规范，新的语法特性如箭头函数、模板字符串、解构赋值等在Vue项目中广泛应用，提高了代码的简洁性和可读性。...
杭电需求分析期末项目网上商城前端Vue项目
12-28
【标题】"杭电需求分析期末项目网上商城前端Vue项目"是一个基于Vue.js技术栈的电商网站开发实例，主要用于教学目的，让学生掌握前端开发的基本技能和实战经验。Vue.js是目前非常流行的一种轻量级前端框架，以其易学...
vue项目如何在手机上面做测试
weixin_43617604的博客
08-27 852
vue项目如何在手机上面做测试 做好了vue项目，然后想在手上跑一遍 1 在项目的config/index.js中修改host为自己电脑的ip地址 2 如果不知道自己电脑的ip地址的话，可进入cmd命令，输入ipconfig便可看到自己的ip地址： 3 然后就重新运行一下vue项目，便可以通过http://ip地址:8080/来访问。例如你的ip地址为192.176.56.87，你就...
手机端访问本地vue项目
a12hhhe的博客
08-27 4945
1.电脑和手机共用同一网络 2.查看电脑IP 命令行输入 ipconfig ，找到IPv4 地址就是你的本机IP地址；注意不是在浏览器直接输入IP显示的那个外网IP地址 3.在Vue项目下找到config目录下的index.js文件 把index.js中的host值 localhost 修改为你的 IP 地址 4.注意把项目中的地址，如下：localhost都改为以上IP地址 ...
Vue项目怎么在手机上面测试
freewlt
11-26 459
1.修改config文件夹下面的index.js文件 找到host: ‘localhost’,修改为：host: ‘0.0.0.0’ module.exports = { dev: { host: '0.0.0.0', port: 8083, } } 2.运行在命令行输入：npm run dev 然后复制链接到浏览器， 将ip地址变为你的ipconfig之后得...
手机调试本地vue项目
lyxkgc的博客
10-29 468
vue 项目在手机上调试 cmd，打开自己电脑终端，输入ipconfig，就能看到自己电脑的ip地址了 标题vue.config.js文件 module.exports = { devServer: { host: '192.168.1.6', // 将浏览地址的本地服务修改为本机ip地址，用来到手机上测试 port: 8080, //端口号 }, } 然后项目启动的时候，直接访问：Network: http://10.0.XXX/
vue移动端项目实现真机调试
jiangjunyuan168的博客
05-11 3644
在vue移动端项目中，我们可以通过真机调试来更好的看到项目实际运行在移动端的效果。 下面就来介绍一下实现的方法： 1、使手机与电脑连接在同一个wifi下 2、修改vue.config.js文件配置 将host路径改成 ‘0.0.0.0’ 3、运行项目 npm run serve 运行成功后，在手机浏览器上输入控制台中提示的Network地址就可以在手机上调试项目了。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值