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框架veryide.librar源代码
Mar 05 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
Smarty模板快速入门
2007/01/04 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php批量修改表结构实例
2017/05/24 PHP
DOM 基本方法
2009/07/18 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python中logging模块的用法实例
2014/09/29 Python
python实现图片压缩代码实例
2019/08/12 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
霸气队列口号
2014/06/18 职场文书
奖励通知
2015/04/22 职场文书
项目战略合作意向书
2015/05/08 职场文书
教育读书笔记
2015/07/02 职场文书
董事长致辞
2015/07/29 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
如何用python反转图片,视频
2021/04/24 Python
opencv读取视频并保存图像的方法
2021/06/04 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL