Vue移动端开发如何在手机端时时预览

最新推荐文章于 2024-05-20 09:37:18 发布
最新推荐文章于 2024-05-20 09:37:18 发布
阅读量823 收藏 1
点赞数
分类专栏： vue.js 文章标签： Vue

在开发移动端的时候，特别想在真机上看自己开发出来的成果，之前用的是 Ghostlab这玩意，可是呢，这玩意是要收费的，而且只有7天的体验时间，感觉有点不满足。
现在分享一个更加方便的方法，是在webpack工具构建在的vue项目，实现真机实时预览...

1.电脑和手机连接同一个wifi
用wifi共享大师开个wifi，手机连接，这都是常规操作啦
2.查询本地IP地址
WIN + R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4

 


3.修改本地项目中IP地址
找到项目中的config文件夹中的index.js文件

 

 

 


示例如下：

 

module.exports = {
dev: {
    host: '192.168.0.114', // 原为: hotst: 'localhost'
    }
}

手机浏览器上输入修改后的项目地址http://192.168.0.114:8080也可以预览，然后大工告成。
 

你可能感兴趣的

JoshFenge
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个移动端专用的Vue2图片预览插件
08-12
Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易上手的特性在开发界受到广泛欢迎。在移动端应用中，图片预览是一个常见的需求，例如在电商产品展示、社交分享、媒体应用等场景，用户可能需要查看大图或者多...
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
总之，通过pdf.js库，我们可以轻松地在Vue应用中实现手机端PDF文档的在线预览，克服手机浏览器的兼容性问题。这个过程涉及到PDF文档的加载、页面的渲染以及用户交互的处理，是一个实用且有挑战性的开发任务。
如何使用手机预览Vue项目（移动端）
热门推荐
手掌日月摘星辰
06-28 2万+
1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip3、本机ip替换localhost，例：http://192.168.1.171:8081/#/goods，预览效果不变4、使用草料二维码，将ht...
vue网页调用手机摄像头，webview如何实现
marissa21的博客
09-25 7611
近期有个需求，通过vue的网页调用手机摄像头，拍摄完成后，传回照片给vue。 作为刚开始接触安卓的小白，看了非常多的案例，都是新建camera类，处理拍照、拍视频、查看照片等操作。而我的需求非常简单，就是点击按钮，拍照，给网页返回照片而已，不需要如此复杂的操作，于是尝试着用简单的方式完成调用摄像头的功能。 （1）vue端，增加一个a标签，设置跳转关键字camera，这个是安卓识别要调用摄像头的...
vue使用海康的H5视频播放器开发包实时预览监控画面
最新发布
m0_68937827的博客
05-20 1210
在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高。2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；// // 分屏播放，默认最大分屏4*4。
联系人消息预览（vue组件）
m0_68094390的博客
05-25 74
1，截图 2，源码 链接：https://pan.baidu.com/s/1-sROJDif547E1sNWoQpPIw?pwd=lsd3 提取码：lsd3 –来自百度网盘超级会员V4的分享 3，代码 chatList.vue <template> <div class="wrapper" :style="{'--width':width,'--height':height,'--oneofonerow':oneofonerow,'--oneoftworow':oneoftworow,
vue 移动端项目如何在手机上演示
HaushoLin的博客
09-28 1599
打开cmd 输入ipconfig 找到ipv4 对应的IP地址 复制到vue项目中的package.json中的scripts --> serve的值vue-cli-service serve 后面加上 --host和你的ipv4地址，在npm run serve就可以把链接复制在手机上查看了，手机就可以访问本地电脑的项目了 在package.json文件中添加本地ipv4地址 "scripts": { "serve": "vue-cli-service serve --host 192.16
vue实现人像框摄像头（手机端，PC端也适用）
一些简单的分享
04-26 2117
1. 在浏览器上ios和Android调用都没问题，但是微信浏览器上ios系统中初次调用摄像头，请求摄像头权限后，会出现视频无显示，无法播放，就算一直重新调用invokingCamera()方法去重新渲染也无效。经研究是由于video宽高均为0，且为暂停状态导致的，不过退出页面，重新进入后又可以正常播放（我猜测是由于这次不需要重新请求摄像头权限）。3. 由于调用手机相册的功能只有三个监听事件（完成、成功、失败），监听不到取消操作，所以，目前解决方法是右上角增加了刷新图标，刷新一下，画面会重新出现。
Vue移动端项目实现使用手机预览调试操作
10-15
在开发Vue移动端项目时，确保应用在手机设备上运行良好并进行实时调试是至关重要的。以下将详细讲解如何实现这一过程： 1. **共享网络连接**：首先，确保你的电脑（无论是台式机还是笔记本）和手机都连接到同一个Wi...
vue实现移动端图片预览
weixin_49994093的博客
07-08 2175
这里写自定义目录标题vue实现移动端图片预览1.安装插件2.main引入3.使用注意扩展 vue实现移动端图片预览 通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。 1.安装插件 npm install vue-photo-preview --save 2.main引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3.使
VueDemo-6.介绍vue 移动端的组件库
a9874561328的博客
02-08 457
6.介绍vue 移动端的组件库 mint-ui 被淘汰 vant Vant - Mobile UI Components built on Vue 6.1 安装vantui库 cnpm i vant -S / yarn add vant -S 6.2 配置UI库 自动按需引入组件 (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 cnpm i babel-plugin-i..
Springboot+Vue3 整合海康获取视频流并展示
qq_43649937的博客
05-22 5550
Springboot Vue3
Vue2 移动端实现图片预览和缩放
好记性，不如烂键盘。
08-07 805
找到需要的页面，在页面标签中加上v-viewer，该标签下的所有图片都可以放大缩小。中的main.js 文件并加入如下代码。
开发vue项目中如何使用手机预览效果
CSDN for recording problems
08-13 2340
.1、电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhos......
vue项目 使用手机预览
Web_Notes的博客
02-21 507
手机预览vue项目
vue开发手机端，如何在手机端进行项目的预览和测试
weixin_44491927的博客
08-15 6470
1.条件：手机和开发项目的电脑要处于同一个WIFI环境中，也就是手机可以访问电脑的IP 2.查看开发项目电脑的IP地址 在cmd终端输入’iconfig’指令，查看电脑连接的IP地址 3.打开自己项目中的package.json文件，在dev脚本中添加一个–host指令，查到的IP地址作为–hosts的指令值。 4.运行项目，将网址用手机打开，即可在手机端进行预览和测试。 ...
vue聊天功能模块（六）消息图片预览
waillyer的博客
09-09 639
需求：双击消息图片，大图预览 思路：使用element-ui中的previewSrcList 开启预览大图的功能。 绑定双击事件，把消息中的url拿到 判断双击事件是否绑定有图片id，预览图片 预览图片 <!--图片预览--> <div style="z-index: 9999999;"> <el-image-viewer v-if="showViewer" :on-close="closeViewer"
（app端）Vue开发的项目在手机上实时查看效果
qq_38969618的博客
02-03 660
电脑上先安装360wifi发射器→npm run serve后控制台出现的network网址（不是本地那个网址）→先用手机连接上电脑的wifi热点→在手机浏览器中直接访问network网址即可。 ...
vue 移动端h5预览PDF
05-27
要在Vue移动端H5中预览PDF，你可以使用第三方库pdf.js。pdf.js是一个开源的JavaScript库，它可以在Web浏览器中渲染PDF文档，无需使用插件或Adobe Acrobat Reader。 首先，你需要在Vue项目中安装pdf.js库，可以使用npm进行安装： ``` npm install pdfjs-dist ``` 安装完成后，在需要预览PDF的组件中引入pdf.js： ``` import pdfjsLib from 'pdfjs-dist'; ``` 在mounted生命周期中加载PDF文档： ``` mounted() { // 加载PDF文档 const loadingTask = pdfjsLib.getDocument("your_pdf_file_url.pdf"); loadingTask.promise.then((pdf) => { // 获取第一页 pdf.getPage(1).then((page) => { // 获取canvas元素 const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1 }); // 为canvas设置宽高 canvas.width = viewport.width; canvas.height = viewport.height; // 渲染第一页 page.render({ canvasContext: context, viewport: viewport }); }); }); } ``` 在template中添加canvas元素： ``` <template> <canvas id="pdf-canvas"></canvas> </template> ``` 这样就可以在Vue移动端H5中预览PDF了。当然，你可以根据需要添加更多的功能，比如翻页、缩放等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值