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 17 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
记一次vue跨域的解决
Oct 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
php数据库配置文件一般做法分享
2012/07/07 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python测试人员需要掌握的知识
2018/02/08 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
python Matplotlib模块的使用
2020/09/16 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
2014年清明节寄语
2014/04/03 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
应届生求职自荐信
2014/07/04 职场文书
单位在职证明书
2014/09/11 职场文书
2014年后勤工作总结
2014/11/18 职场文书
小学体育课教学反思
2016/02/16 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android