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 相关文章推荐
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
jquery.validate使用详解
Jun 02 Javascript
js编写的treeview使用方法
Nov 11 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
Javascript创建类和对象详解
May 31 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python使用贪婪算法解决问题
2019/10/22 Python
如何写python的配置文件
2020/06/07 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
中青班党性分析材料
2014/02/16 职场文书
法制宣传口号
2014/06/16 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
详解PyTorch模型保存与加载
2022/04/28 Python