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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
类的另类用法--数据的封装
2006/10/09 PHP
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
常用的10个Python实用小技巧
2020/08/10 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
奖金申请报告模板
2015/05/15 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL