Vue移动端项目实现使用手机预览调试操作
更新时间：2020年07月18日 13:41:38 作者：上官孜然
这篇文章主要介绍了Vue移动端项目实现使用手机预览调试操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。
1.电脑和手机连接到同一个WIFI
a.台式电脑和手机同时链接一个路由器，使用同一个wifi；
b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以；
2.查询本地IP地址
WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；
3.修改本地项目中IP地址
找到项目中config文件夹，下面index.js文件打开；
找到host: ‘localhost', 改为上面本地IPv4地址；
module.exports = {
dev: {
host: '192.168.0.107', // 原为: hotst: 'localhost'
}
}
4.制作二维码
借助二维码生成工具修改后项目生成二维码。当然不嫌麻烦，地址栏手动输入也可以。https://cli.im/
5.重新启动项目
重新启动项目，然后浏览器地址输入本机地址http://192.168.0.107:8080 访问项目PC端项目；
然后，手机微信扫描二维码就可以访问啦！
以上这篇Vue移动端项目实现使用手机预览调试操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue 面包屑导航组件封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于如何使用vue3简单实现WebSocket通信的相关资料,WebSocket是全双工网络通信通信协议,实现了客户端和服务器的平等对话,任何一方都可以主动发送数据,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue配置多代理服务接口地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue.js路由管理器 Vue Router，主要介绍的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要为大家介绍了Vue-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js，这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下2023-07-07
详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖
本文主要介绍了在Vue3使用＜script lang=“ts“ setup＞语法糖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本篇文章主要介绍了vue-cli配置环境变量的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论