使用手机调试vue项目 --亲测可用！

最新推荐文章于 2024-04-26 16:49:42 发布
最新推荐文章于 2024-04-26 16:49:42 发布
阅读量746 收藏 1
点赞数
分类专栏： 其他 文章标签： vue 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45234510/article/details/107565687
版权

目录

一、确保手机与做项目的电脑连同一个wifi

二、确保电脑公网的防火墙已关闭

1、双击打开 我的电脑
在这里插入图片描述
2、右键 网络 -> 选择 属性
在这里插入图片描述
3、打开防火墙
在这里插入图片描述
4、单击启用或关闭防火墙在这里插入图片描述
5、暂时关闭防火墙在这里插入图片描述

二、打开命令窗口，输入ipconfig

在这里插入图片描述

三、找到无线网适配器的ipv4地址并复制

在这里插入图片描述

四、去vue的项目下，修改config文件下的index.js文件。将host更改为电脑的IPv4地址。

在这里插入图片描述

五、保存运行，在手机打开http://ipv4:8080即可访问

x-dragon8899
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-devtools
03-27
6. **Vue版本信息**：Vue Devtools会显示所调试Vue应用程序的版本，这对于确保兼容性和了解可用特性非常重要。 使用Vue Devtools时，开发者可以实时观察到数据变化如何影响组件视图，从而快速定位并修复问题。此外...
vue-vben-admin-main源码
12-19
4. **Vue CLI**：虽然未明确提及，但很可能项目是使用Vue CLI创建的，这是一个官方提供的命令行工具，用于快速初始化Vue项目，包含了webpack配置和许多有用脚手架。 5. **构建和运行**：`npm build`是构建项目的...
Vue移动端项目实现使用手机预览调试操作
10-15
主要介绍了Vue移动端项目实现使用手机预览调试操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
手机调试本地vue项目
lyxkgc的博客
10-29 458
vue 项目在手机上调试 cmd，打开自己电脑终端，输入ipconfig，就能看到自己电脑的ip地址了 标题vue.config.js文件 module.exports = { devServer: { host: '192.168.1.6', // 将浏览地址的本地服务修改为本机ip地址，用来到手机上测试 port: 8080, //端口号 }, } 然后项目启动的时候，直接访问：Network: http://10.0.XXX/
vue移动端真机调试方法
m0_37680500的博客
05-11 3800
最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。真机环境调试起来就非常的不方便，例如：1、无法看到日志信息2、无法实时调试（每次都要打包到线上才可测试）下面教程提供一下移动端的调试方法，仅供学习交流。
vue---移动端调试功能vConsole
是一座岛
10-17 1万+
一. 简述 web端项目可以查看浏览器控制台信息，方便调试。然而移动端项目没有控制台可看，调试起来特困难。最近在做基于vue框架的移动端项目，有的bug不看日志，无法调试，很头疼。百度一下终于解决了这个难题，基于vue的有个可以在移动端查看日志的插件vConsole，很好用，也方便。 二. 如何使用 1. 引入vConsole插件：yarn add vconsole -s或npm in...
Vue如何在手机上调试
xueyoubangbang的博客
03-12 1442
运行起Vue项目后，会显示如下 - Local: http://localhost:18080 //连接本地 - Network: http://10.4.110.82:18080 //网络连接，这个会经常存在访问不了，不推荐使用 1.手机线连接电脑 2.127.0.0.1(本地地址)：18080：18080 （端口） 如果这一步还是不能访问的话，进行第三步 3.adb reverse tcp:8000（端口号） tcp:8000 这个cmd命令的意思是： Androi...
vue-devtools直接解压可用
03-12
Vue.js 是一个流行的前端JavaScript框架，...无论是在开发阶段还是在排查问题时，Vue Devtools都能提供强大的支持，帮助开发者快速理解并调试Vue应用程序。记得始终保持Vue Devtools的更新，以获取最新的特性和修复。
使用vue-cli打包过程中的步骤以及问题的解决
08-27
在使用Vue CLI进行项目打包的过程中，开发者通常会遇到一系列步骤和问题。本文将详细解析这些步骤和常见问题的解决方案。 1. **打包命令**：在Vue CLI项目中，执行打包操作的命令是`npm run build`。这个命令是基于...
vue-dev for vue3.0
09-14
最新vue3的web调试插件，直接拖动到360浏览器可用，谷歌浏览器似乎有兼容性问题，但360浏览器测试使用情况非常好。注意，该插件是用在vue3.0及以上的
vue移动端项目实现真机调试
jiangjunyuan168的博客
05-11 3551
在vue移动端项目中，我们可以通过真机调试来更好的看到项目实际运行在移动端的效果。 下面就来介绍一下实现的方法： 1、使手机与电脑连接在同一个wifi下 2、修改vue.config.js文件配置 将host路径改成 ‘0.0.0.0’ 3、运行项目 npm run serve 运行成功后，在手机浏览器上输入控制台中提示的Network地址就可以在手机上调试项目了。 ...
vue创建的项目如何在手机上调试
web前端学习总结
05-11 3101
vue创建的项目如何在手机上调试 手机和电脑要在同一个网络下。 找到电脑的IPv4地址地址。我的电脑是mac，打开系统偏好设置——>网络——>高级——>TCP/IP——>IPv4地址。 然后去vue的项目下，修改config文件下的index.js文件。将host更改为电脑的IPv4地址。(例如我的IPV4地址是：192.168.43.126) 然后在手机的浏览器上打开...
手机端访问本地vue项目
最新发布
liuzaixi的博客
04-26 854
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
vue项目手机真机预览和调试
黑客与画家
12-04 6065
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来；但是如果要上线上每次都要打包所以很不方便，给大家介绍一下我的方法： 1.** 首先找到 config 下面的index.js ** 如图： 2. 找到host:‘localhost’ 跟换成IP 的方式 ：如图 我的是配过跨域的所以代码跟你们的可能有点不一样，不过只要找准host:‘localhost’ ...
vue项目在手机上进行调试
qq_41395120的博客
06-13 626
vue项目想在手机上打开，可以在vue项目config文件夹下的index.js里把host的属性值改成你自己本机的IP地址 然后重启项目npm run dev 然后复制地址栏的地址到手机浏览器打开就行
Vue移动端项目如何使用手机预览调试
热门推荐
Lynn
04-12 2万+
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，...
vue真机调试_vue项目在自己手机上调试功能
weixin_33377571的博客
01-30 1531
一般vue项目在本地运行是localhost:8080/#/这个时候如果我们想在手机上调试可以在vue项目config文件夹下的index.js里把host后面的localhost改成你自己本地的IP地址如果你不知道IP地址是什么，可以在命令行里输入 ipconfig其中IPV4的地址就是你的本地地址现在把这个地址写在index.js里面的host后面然后重启项目npm run dev这个时候在地...
npm vue-cli-service
05-24
你可以使用 `npm run serve` 命令来启动一个开发服务器，在本地开发和调试 Vue.js 项目。 你也可以使用 `npm run build` 命令来构建生产环境下的 Vue.js 项目，生成静态文件，用于部署到服务器上。 `vue-cli-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值