时间:2021-05-26
最近在开发移动端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移动端项目实现使用手机预览调试操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vuetouchdirective是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕
前言最近在开发项目的时候,分别开发了PC端和手机端,需要实现,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看。子组件exportdefault
Vue+ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下1、安装vue-pdfnpminstall--savevue-pdf2、
vue移动端实现div拖拽移动,供大家参考,具体内容如下本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。相关知识点touchstart当在屏