vue项目 使用手机预览

已于 2024-02-21 14:33:05 修改
阅读量676 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2024-02-21 09:44:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_notes/article/details/136203667
版权

项目需要使用手机查看效果时：

1、电脑和手机连接到同一个WIFI

2.查询电脑本地IP地址
WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；

3.修改本地项目中IP地址
找到项目中config文件夹
找到host: ‘localhost’, 改为上面本地IPv4地址
在这里插入图片描述

4.npm run dev 重新启动项目

5.手机预览
方法一：草料二维码生成器 https://cli.im/
微信扫描生成的二维码即可预览效果

方法二：直接复制网页链接，手机浏览器打开

一个打工仔的笔记
关注
VUE项目PDF文件在线浏览使用vue-pdf
m0_62169790的博客
04-07 936
PDF文件在线浏览
vscode-实现html和vue实时预览-对比了vscode的8个预览插件
热门推荐
billycoder的专栏
02-06 2万+
1.Open in Browser 打开chrome浏览器或者其他外部浏览器 总结:单纯想打开外部浏览器,用它 2.HTML Preview 内嵌浏览器 打开方便,当前页面是html页面,点击右上角图标就可以了 可以实时预览效果 不足:带图片的话,不能有中文路径 3.vscode-preview-server 可以实时预览效果 右键使用 可以内嵌,也可以外部 右键使用 4.Live Server 可以实时预览效果 右键使用 打开外部浏览器 右键菜单 5. Brow
Vue实现手机扫描二维码预览页面效果
12-28
本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码，供大家参考，具体内容如下 背景：vue-cli3 + ant-design-vue 搭建的后台管理系统 需求：实现扫描二维码即可在手机预览H5页面功能 使用插件：qrcode step1：安装插件 npm install qrcode --save step2：引入插件 在项目中新建QRcode.vue文件 <script
前端开发如何在手机上访问预览测试
weixin_43617604的博客
09-02 284
1 在项目的config/index.js中修改2 如果不知道自己电脑的ip地址的话，可进入cmd命令便可看到自己的ip地址：3 然后就重新运行一下vue项目，便可以通过来访问。，你就可以在浏览器中输入来访问vue项目了4 如果想在手机上的浏览器访问，。可以通过修改wifi的代理来达到这一效果。
vue-admin-templete项目配置在手机上预览
weixin_42883164的博客
11-03 369
vue-admin-templete 项目在手机上预览
Vue项目移动端如何在手机上预览
最新发布
m0_63450672的博客
10-21 149
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考首先找到电脑局域网ipv4地址,可以连一个wifi或者热点.然后配置从局域网启动项目,手机输入网址即可解决问题。
手机端访问本地vue项目
liuzaixi的博客
04-26 1300
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
vue3 element-plus 对话框改手机预览组件(苹果15样式)
ZL3064436257的博客
12-12 1385
vue3 element-plus 对话框改手机预览组件(苹果15样式)
高仿小米商城（手机版）的Vue项目
04-27
在“高仿小米商城（手机版）的Vue项目”中，开发者可能利用Vue.js的特性实现商品展示、筛选、搜索、购物车管理、用户登录注册等功能，同时结合API接口获取和提交数据，构建出一个与小米商城类似的移动购物体验。...
在vue项目实现一个ctrl+f的搜索功能
01-19
这次在项目中遇到了一个要做一个搜索功能，因为项目是vue的，而且是在手机端，所以对这个搜索功能的实现和能做到什么样子都没有底，在网上研究了一会，发现大家的解决方法都各有特色，有引入第三方包的，有遍历的，...
vue框架使用
qq_45645848的博客
01-11 1238
前端vue基础知识总结，汇总
移动端Vuejs图片预览插件
08-10
移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
一个移动端专用的Vue2图片预览插件
08-12
An image viewer base on Vue.js for mobile / 一个移动端专用的 Vue2 图片预览插件
Vue移动端项目实现使用手机预览调试操作
10-15
主要介绍了Vue移动端项目实现使用手机预览调试操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于Vue的电商购物网站搭建设计源码
05-28
本项目是基于Vue的电商购物网站搭建设计源码，包含277个文件，其中包括128个PNG图像文件、51个JPG图像文件、48个Vue组件文件、20个JavaScript文件、5个JSON配置文件、4个EOT字体文件、4个SVG文件、4个TTF字体文件、4...
Vue移动端开发如何在手机端时时预览
qq_40126542的博客
03-21 862
在开发移动端的时候，特别想在真机上看自己开发出来的成果，之前用的是 Ghostlab这玩意，可是呢，这玩意是要收费的，而且只有7天的体验时间，感觉有点不满足。 现在分享一个更加方便的方法，是在webpack工具构建在的vue项目，实现真机实时预览... 1.电脑和手机连接同一个wifi 用wifi共享大师开个wifi，手机连接，这都是常规操作啦2.查询本地IP地址WIN + R，输入cmd回车，...
Vue 项目在手机上预览
shiyutim
11-07 444
Vue 项目在手机上预览 首先找到项目里面config => index.js，找到host: localhost，把localhost改为你的电脑的ip地址。（ip地址可以通过cmd输入命令ipconfig查看） 修改完后，需要重新启动项目。（确保电脑和手机处于同一局域网内） 手机输入带ip的网址，就可以访问了（带端口号）。 ...
开发vue项目中如何使用手机预览效果
CSDN for recording problems
08-13 2435
.1、电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhos......
Vue+Springboot问卷调查网站项目源码及使用指南
资源摘要信息:"基于Vue+Springboot BS实现的问卷调查网站项目源码+项目使用说明.zip" 在当前的IT行业中，前后端分离已成为一种流行的技术架构模式，而Vue和Springboot正是这一架构下十分流行的两大技术栈。Vue.js是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值