移动端vue的项目如何在手机上实时调试查看呢

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

Vue config dev IP地址 项目访问
关键词由CSDN通过智能技术生成

首先第一步：找到vue的项目config文件夹下的index.js

在这里插入图片描述
第二步：找到dev这个对象里的host的参数，改成你当前电脑的IP地址

在这里插入图片描述
注意：不要加上http，否则会报错
cmd 打开命令运行符，输入“ipconfig”查询本地 IP；

第三步：然后重新dev项目，就可以用你当前电脑的IP地址进行访问了

lannieZ
关注
专栏目录
Vue移动端项目实现使用手机预览调试操作
10-15
主要介绍了Vue移动端项目实现使用手机预览调试操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
WEB移动端开发中，局域网内手机浏览器访问电脑页面，实时查看代码调试结果
劲枫的博客
11-14 2542
痛点：在进行移动端页面开发时，经常需要用手机查看开发的页面效果。虽然浏览器自带模拟器，但是各个手机兼容问题调试以及操作效果调试还是需要上真机。 解决途径： 1、将代码扔到服务器，通过连接服务器访问页面调试 2、采用内网穿透，将自己的电脑当成服务器主机，手机访问电脑服务器。之前我用过NATAPP，价格也还合理。 3、最简单的，最直接的，手机和电脑都连在一个局域网，apache服务器在http...
Vue项目在移动端调试办法
最新发布
yodoyskts的博客
08-20 461
记录一下有些同学在写项目的时候不可避免的会在移动端展示，但是移动端又无法看到后台的参数和接口调用情况，本篇文章提供一个最简便便捷的办法供大家参考：通过vConsole来调试。引入完成之后重启一下项目就会在项目中出现一个vConsole的标签：如下图。这样在移动端想调试项目的时候点击这个标签就会打开vconsole的调试。当然在发版的时候记得把man.js里的vconsole注释掉哦。第二步：在man.js中引入vConsole。第一步：安装vConsole。
移动端项目如何在手机上查看效果
qq_41662119的博客
08-30 1170
很多时候我们需要在真机上调试，进行代码的维护修改，如何在手机上查看呢？ 我们拿vue来说， 1.在vue的config/index.js文件中我们可以看到项目启动的一个端口号 上图域名是我进行修改后的，大家打开后应该会默认显示localhost 2.window+R，输入cmd进入控制台，然后输入命令ipconfig/all 回车，我们可以看到自己电脑的一些ip信息 ...
使用手机预览移动端项目（Vue）
weixin_30387339的博客
07-24 177
1、在 npm run dev 启动Vue项目之后。例：http://localhost:8095/#/chatList 2、查看本机的 IP （WIN + R + cmd ） 输入 ipconfig 即可查看 3、用 IP 地址替换 localhost 例：http://192.168.1.6:8095/#/chatList 4、使用草料二维码，将http://1...
vue移动端项目如何在真机测试
giao序员
11-25 1642
通常大家在写移动端项目的时候都想在自己手机上测试一下看一下效果确保无误后在上线，虽然许多浏览器都有模拟手机功能但不如真机来的实在那如何测测试呢请看下面 第一步打开搜索栏输入cmd命令打开窗口 第二步输入ipconfig找到本机ip地址 第三步找到项目下的config文件下的index.js下的host：修改为本机ip地址 然后重新启动项目npm run dev 把项目地址复制下使用草料二维码生...
如何在手机上查看本地vue服务代码
my_roads的博客
09-30 654
1.下载一个uTools 下载链接：https://www.u.tools/ uTools介绍：https://u.tools/docs/guide/about-uTools.html#utools-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F 2.再uTools里面下载一个插件（hosts切换） 3.修改本地hosts指向： localhost代指后端接口域名前缀 4.下载fiddler抓包工具 ...
【移动端】移动端项目手机预览方法
NAMECZ的博客
11-01 2106
移动端项目，手机预览方法： 环境要求：node安装成功 第一步：打开命令行工具 ① win + r 打开windows运行窗口 ② 输入 cmd 打开命令行工具 第二步：安装全局http服务 nmp install -g http-server （npm安装全局http服务） ...
hm-new1-69：移动端vue项目
03-02
【Vue移动端项目构建详解】 Vue.js 是一个轻量级、高性能的前端框架，它以其易用性和灵活性在Web开发领域中备受青睐。本项目“hm-new1-69”是一个基于Vue的移动端应用，旨在提供一种高效且现代化的移动开发体验。 ...
Vue2开发移动端的模板
03-18
Vue2 是一款非常流行的前端JavaScript框架，用于构建用户界面，特别是在移动端应用开发中表现出色。Vue2 提供了丰富的功能和简洁的API，使得开发者能够更高效地构建可复用、可维护的组件化应用。这个"Vue2开发移动端...
Vue移动端项目（一）
qq_48687155的博客
08-20 3314
Vue移动端项目
移动端项目如何查看手机浏览器信息
weixin_30468137的博客
12-28 270
html页面引入一段js代码即可： javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () ...
如何在手机上查看vue-cli构建的项目
五颜六色的白
06-26 396
我自己用下面的方法是有效的： 1.找到无线网络局域网ip 按住window+R键，输入cmd，回车，在弹出的框内，输入ipconfig，回车 在展示的结果中，有一个以太网的ip，有一个无线网的ip，复制无线网络的ipv4地址，如192.168.0.62 2.为项目设置运行ip 打开vue项目的config文件夹中的index.js文件，在dev对象中，host的值由’localhost’改为上面复...
手机查看本地的vue项目方法
dreamy_wx的博客
05-21 247
host里填入自己的IP地址 把项目跑起来手机打开链接即可 这里PC和手机要处在同一个网络下，如果给他人查看建议使用内网穿透 内网穿透博文链接：链接: https://editor.csdn.net/md/?articleId=117114051.
Vue项目打包成移动App以及在手机上运行
weixin_44068394的博客
03-16 2796
使用工具HBuilder 或者是HBuilder X 将完成的Vue项目打包 (build)后的dist文件放入编译器,在HBuilder中直接右键选择转换为移动App即可，在HBuilder X中要先新建一个5+App项目 在新建的test项目中，除了App配置文件manifest.json，其他文件可以全都删除掉。然后，将之前打包好的vue项目中的dist文件夹中的所有文件复制到...
手机上调试pc端电脑上的项目
weixin_44784401的博客
05-10 741
手机上调试pc端电脑上的项目
关于vue项目移动端实时调试无法启用所踩的坑
Benz_s600的博客
04-22 1004
1.首先我们需要在同一局域网下，连着同一个wifi（描述不太准确哈） 2.查看自己电脑的ip，window + r组合键 调出命令行，输入cmd 3.在窗口中再输入ipconfig，找到ipv4地址 3.在vue项目中 config-index.js中,将host替换为你的ipv4地址 4.在这个时候我们利用手机浏览器输入你的ip地址+端口号再加路由，有可能会进不去，这个时候查看下我们电脑的...
让vue的项目可以在手机预览起来（不用内网穿透，只需要在局域网内）
magic_xiang的博客
11-25 5419
     现在对于做网页来说，一般都是移动端的项目比较多，所以一开始我学vue的时候也是从移动端项目开始做，但是我们的开发工具是浏览器，虽然可以在chrome开发模式中用模拟手机预览效果，那么怎么通过真机去预览效果呢？     一开始我想到的是放在我自己电脑Apache配置好虚拟主机环境中，然后通过内网穿透直接让手机访问，但是使用vue-cli搭建项目需要进行npm run build得到的文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值