Vue移动端项目实现使用手机预览调试操作


Posted in Javascript onJuly 18, 2020

最近在开发移动端Vue移动端项目,查了一些资料,这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传。

1.电脑和手机连接到同一个WIFI

a.台式电脑和手机同时链接一个路由器,使用同一个wifi;

b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以;

2.查询本地IP地址

WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4;

Vue移动端项目实现使用手机预览调试操作

3.修改本地项目中IP地址

找到项目中config文件夹,下面index.js文件打开;

找到host: ‘localhost', 改为上面本地IPv4地址;

module.exports = {
dev: {
 host: '192.168.0.107', // 原为: hotst: 'localhost'
 }
}

Vue移动端项目实现使用手机预览调试操作

4.制作二维码

借助二维码生成工具修改后项目生成二维码。当然不嫌麻烦,地址栏手动输入也可以。https://cli.im/

Vue移动端项目实现使用手机预览调试操作

5.重新启动项目

重新启动项目,然后浏览器地址输入本机地址http://192.168.0.107:8080 访问项目PC端项目;

然后,手机微信扫描二维码就可以访问啦!

以上这篇Vue移动端项目实现使用手机预览调试操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
微信小程序签到功能
Oct 31 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 #Javascript
vue中用 async/await 来处理异步操作
Jul 18 #Javascript
vue 使用async写数字动态加载效果案例
Jul 18 #Javascript
vue-router为激活的路由设置样式操作
Jul 18 #Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 #Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 #Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 #Javascript
You might like
调频问题解答
2021/03/01 无线电
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
python搜索算法原理及实例讲解
2020/11/18 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
美容院店长岗位职责
2014/04/08 职场文书
建筑施工安全责任书
2014/07/24 职场文书
公司领导班子对照材料
2014/08/18 职场文书
批评与自我批评总结
2014/10/17 职场文书
大学生学年个人总结
2015/02/15 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
Go timer如何调度
2021/06/09 Golang