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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
create-react-app开发常用配置教程
Jun 25 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的autoload自动加载机制使用说明
2010/12/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP进程同步代码实例
2015/02/12 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python实现随机爬山算法
2021/01/29 Python
《寓言两则》教学反思
2014/02/27 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle