vue-cli 移动端项目如何在手机上调试预览
这里分享下如何在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-cli 移动端项目如何在手机上调试预览的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 移动端h5实现拍照上传图片并预览&webuploader
.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- Charles学习(四)之使用Map local代理本地静态资源以及配置移动端代理在真机上调试iOS和Android客户端
前言 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试也不想在模拟器中调试,我想要在真机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的 ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
- web端实现图片放大切换显示预览
项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...
- vue移动端项目在手机上调试
1.电脑和手机要连同一个wifi 一定是复制无线网的IP,而不是以太网的IP 2.在你的电脑上查找无线网络的ipv4地址: 查找方法:windows+r 然后再输入框里输入cmd 回车 会出现这 ...
随机推荐
- IIS服务器怎么查看网站日志
在做网站的优化以及网站安全的时候,分析网站的日志是非常重要的,但是公司的服务器是IIS的,以前弄的是linux的服务器,不知道该怎么弄,最终找到了解决办法. 1.iis默认是有日志的,在iislog下 ...
- centos7.5环境下elasticserch5.6.15集群升级6.8.4
节点的角色分片: node01 eus_mp_web01 : master,false node,false, ingest,true node02 eus_mp_es01 : master,true ...
- Golang常见小细节总结(1)
本系列不定期更新,用于记录平常开发过程中出现的一些小问题 Array 类型的值作为函数参数    可以理解slice是对array的一个视图,底层还是array所以会被修改 通过map的ok来确 ...
- java面试题实战三
华为优招面试经验. 1.笔试(这部分按照华为以前的风格不会为难人的,认真做AC一道题就可以进面试了,我编程能力一般吧,做了一道半而已,-_-||!) 2.测评(性格测试,不要太偏激就行了) 3.面试分 ...
- maven基础依赖外部lib包(依赖钉钉sdk为例)
jar包放置位置 pom.xml指定依赖 1 <dependencies> 2 <!--钉钉工具包,如缺失请到钉钉服务器开发文档下载--> 3 <dependency&g ...
- Linux 修改用户的JDK版本
1. vi .bash_profile 2.复制以下到bash_profile 文件,并将此文件里原来的JAVA_HOME和PATH删掉 JAVA_HOME=/java/jdk1..0_22 JRE ...
- ELK 部署相关问题汇总
1.启动es-head问题 因为高版本es-head需要单独启动,所以先要安装npm等工具.安装教程见[1] 启动命令:../elasticsearch-head/node_modules/grunt ...
- 🐯 php项目中类的自动加载
主要函数:spl_autoload_register() — 注册给定的函数作为 __autoload() 的实现 将函数注册到SPL __autoload函数队列中.如果该队列中的函数尚未激活,则激 ...
- 调试node接口
从node服务端到浏览器端,调试node脚本,验证接口功能是否正常. 一.温故知新 https://www.cnblogs.com/camille666/p/nodejs_server.html ht ...
- MySQL ALTER TABLE语法
先看一下定义(密密麻麻) ALTER TABLE tbl_name [alter_specification [, alter_specification] ...] [partition_optio ...