vue项目根据ip地址在手机中预览

最新推荐文章于 2024-11-11 15:38:24 发布
最新推荐文章于 2024-11-11 15:38:24 发布
阅读量463 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/p930318/article/details/84986710
本文介绍如何修改项目配置，使本地开发环境可通过手机扫描二维码访问。步骤包括：编辑config/index.js文件，将host从localhost改为0.0.0.0；重启项目并将访问地址改为本机ip；最后使用手机扫一扫功能进入页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.找到config目录下的index.js文件。

2.找到host，把localhost改成0.0.0.0

3.重启项目，将端口号前的地址改成本机ip地址， (查看本机ip: 运行cmd ，命令ip config)。

 

这个地址生成的二维码就可以通过手机端的扫一扫功能进入页面啦。

 

Vue项目打包后的dist文件夹如何本地预览？Node服务+局域网访问全攻略 vue项目打包预览、静态服务、express部署、局域网访问、node本地服务、vue打包dist目录预览
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
07-19 84
作为前端开发工程师，我经常遇到这样的问题：“Vue 项目打包完之后，怎么在本地像线上一样预览效果？很多小伙伴直接打开，结果发现页面白屏、路由失效、样式乱掉，这其实是因为 Vue 项目打包后依赖的是服务环境，而不是简单的打开 HTML 文件。今天我就手把手教你，如何用启动一个静态服务来预览打包后的dist目录，并且支持手机等设备通过局域网访问调试。Vue 项目打包后，不是直接打开就能用的，而是需要运行一个真正的服务环境。通过简单的，我们就能轻松实现本地和局域网的静态部署预览。用。
初始化新建vue-cli项目，用本地ip预览的方法
认真和努力总没有错
01-15 327
新建的vue-cli项目，不想使用http://localhost:8080/#/，想用本地ip地址预览的2个方法: 1、在json文件中，的dev项中：添加 --host 0.0.0.0 2、在config目录下的index.js的host改成0.0.0.0...
通过IP地址访问前端Vue项目
2301_78767322的博客
01-16 1668
通过IP地址访问前端Vue项目
vue如何根据ip地址获取实时当地城市、时间、天气
2401_84150107的博客
04-08 1713
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
如何在本地文件系统中预览 Vue 项目？
最新发布
唐诺
11-11 697
要在本地文件系统中直接预览 Vue 项目，你需要确保打包后的 dist 文件夹中的资源能够正确加载。
Vue-项目通过本地ip访问
qq_41709082的博客
12-16 813
Vue项目通过本地ip访问 1.修改package.json文件： 将：“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”, 替换成： “dev”: “webpack-dev-server --open --hot --host 0.0.0.0 --inline --progress ...
vue在手机中通过本机IP地址访问webApp的方法
10-18
在开发Vue应用的过程中，如果想要在手机上通过本机的IP地址来访问应用，需要进行相应的配置。 配置过程主要涉及到`package.json`文件的修改。在Vue项目的`package.json`文件中，通常会有一个`scripts`字段，用来...
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
vue-cli项目无法用本机IP访问的解决方法
10-17
然而，有时我们可能遇到一个问题，即在尝试通过本机IP地址访问这个开发服务器时，浏览器提示“拒绝了我们的链接请求”，这使得无法在连接到同一局域网的其他设备（如手机）上预览应用。这个问题通常是由于Vue CLI的...
VUE项目通过ip访问前端页面的相关配置
yangwq的博客
02-05 1401
package.json "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
vue项目怎么在手机查看
豪先生的博客
09-24 4265
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
不积跬步何以至千里
05-28 8001
访问内网文件思路如下: 1.后端将文件转为二进制文件流 word+excel将其转为html 从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为pdf 然后调用pdf接口 上众所期待的效果图: word excel pdf 一、预览公网上的文件(较为简单 所以放第一) 1.预览公网能访问的文件 使用XDOC就能实现 //file_url是你的文件地址 <a href="http://www.xdocin.com/xdoc?_func=to&_for
vue项目用IP+端口访问
Xiao_QiangMa的博客
10-23 1647
vue项目用IP+端口访问： 不同结构的项目有不同的解决方式：（个人总结，大神勿喷） 方法1、找到项目配置文件，将host：localhost改为“0.0.0.0”，重洗项目 方法2、找到package.json文件，找到自己项目的运行命令。比如：npmrun serve，在serve后面加上 “–host 0.0.0.0” ，重启项目。 ...
移动端项目如何在手机上面做测试
keji_123的博客
08-23 1万+
引言最近在看vue2.0，然后仿写饿了么，但是怎么把自己写好的项目在手机上面测试呢，比如移动端的1pxbiang看问题，在电脑模拟的手机端是看不到的。下面开始介绍方法： 用webstrom启动vue项目，然后可以看到浏览器上面的项目网址，例如：http://localhost:8080/goods，然后需要把localhost换成自己的ip地址。 那么怎么查看自己的ip地址呢？ 点击
vue搭建的H5项目如何在手机上实时预览
qq_41009420的博客
09-05 1301
不需要安装任何东西即可在手机端运行你的代码
vue项目手机真机预览和调试
黑客与画家
12-04 6234
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来；但是如果要上线上每次都要打包所以很不方便，给大家介绍一下我的方法： 1.** 首先找到 config 下面的index.js ** 如图： 2. 找到host:‘localhost’ 跟换成IP 的方式 ：如图 我的是配过跨域的所以代码跟你们的可能有点不一样，不过只要找准host:‘localhost’ ...
vue使用高德地图，精确定位&ip定位，获取城市、地区位置
热门推荐
初心 - 杨瑞超个人博客
08-03 2万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 1、高德地图准备 点进入网址：https://lbs.amap.com/api/javascript-api/guide/abc/prepare （1）注册开发者账号 （2）进入控制台 （3）申请高德地图key 2、在index.html中引入高德地图...
Vue 自动获取本地ip，并打开浏览器
主要分享大数据相关的知识，如Spark、Hudi
05-29 6707
前言 功能如题，本文参考：https://www.jianshu.com/p/54daac2cc924，目的只是为了把网上查的资料做个笔记~ 以下均为vue cli2 创建的项目 自动打开浏览器 只需要在config/index.js里找到autoOpenBrowser将其设为true即可 获取本地ip 方法一 在config/index.js 顶部添加 const os = require(...
vue项目本地实现手机预览
qq_37902065的博客
05-19 4073
1.windows下打开命令ipconfig行查看本机ip地址2.修改config下的index.js文件3直接把地址发到手机即可访问
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值