手机访问本地vue项目

最新推荐文章于 2025-04-25 16:36:46 发布
原创 最新推荐文章于 2025-04-25 16:36:46 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文档记录了如何配置Vue项目以允许手机访问。主要步骤包括：1）修改config/index.js中的host设置，2）在package.json的dev脚本中添加--host 0.0.0.0参数。完成配置后，确保手机和电脑连接同一局域网，可能需要关闭防火墙以解决访问问题。此方法适用于移动端预览和调试Vue应用。

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

手机访问本地vue项目

1.vue配置修改：
1》config ->index.js修改host
在这里插入图片描述
2》pa’ckage.json的dev加上–host 0.0.0.0
在这里插入图片描述
2.重启项目
此时用手机打开运行成功的链接。

注意：手机和电脑必须在同一局域网内（连接同一个无线网）。如果此时还打不开，就把防火墙全部关闭

个人纪录，方便回忆

挖博工
关注
同一局域网访问本地 Vue 项目
grootbaby
03-03 1528
同一局域网访问本地 Vue 项目 需要访问电脑需要在同一局域网下 | | 连同一个WiFi，这个就不说了吧。懂得都懂。 调试机 ip：192.168.30.100，将 192.168.30.100 改为你自己本机 ip 就OK。 不需要修改配置文件 重启本地环境： yarn run dev --host 192.168.30.100 （ 加红的 yarn 是关键，不要尝试用 cnpm 或者 npm ） 需要修改配置文件 方法一： 在 config/index.js 文件中找到 h
vue-cli启动本地服务局域网不能访问的原因分析
08-28
主要介绍了vue-cli启动本地服务，局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目 用localhost可以访问，但是切换到ip就不可以访问的原因，本文给大家介绍的非常详细，需要的朋友参考下
完美解决通过IP地址访问VUE项目的问题
10-15
主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
同wifi时用手机访问运行的项目-vue3的H5项目从0到1工程化落地经验篇4
最新发布
王月Lydia的博客
04-25 552
这是vue3的H5项目从0到1工程化落地经验的第4篇，有了这个系列你可以从0创建一个自己的h5项目，并且里边涉及到的常用的点都会包含到。本来想写成一篇，但是太长了，搞得编辑器都卡了。所以我拆分成了一系列的文章，在文章尾部能看到其他链接，如有不当之处，欢迎大神不吝赐教。本篇解决同wifi下手机如何访问电脑起的项目的问题。
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端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
手机如何访问vue项目localhost
少油少盐不要辣
04-03 1179
在您的手机浏览器中输入您计算机的IP地址，加上Vue项目的端口号。（对于Mac/Linux）来查看计算机的IP地址。这将允许您在手机上访问本地主机上的Vue应用程序。的条目，这是计算机的本地IP地址。最后，还需要关闭电脑的防火墙设置。（对于Windows）或。来启动Vue开发服务器，
手机端访问本地vue项目
liuzaixi的博客
04-26 1584
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
vue:手机访问本地项目
qq_45061461的博客
06-28 1047
3.手机浏览器输入地址 : 电脑ip + 项目端口号(比如:8080)1.需要在项目根目录config文件夹中的index.js中配置。2.需要电脑的ip地址 需要在同一个局域网环境中。查看电脑 :IPv4 就是ip。
vue项目怎么在手机查看
豪先生的博客
09-24 4250
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
手机访问本地Vue项目
weixin_47540149的博客
05-08 947
在项目的package.json中 scripts下的dev中的后面加上–host 0.0.0.0
vue-cli项目无法用本机IP访问的解决方法
12-11
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。 于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性 发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务。 解决办法 将host重新定义为：0
如何使用手机预览Vue项目（移动端）
weixin_39914806的博客
07-27 2033
我自己用下面的方法是有效的： 1.找到无线网络局域网ip 按住window+R键，输入cmd，回车，在弹出的框内，输入ipconfig，回车 在展示的结果中，有一个以太网的ip，有一个无线网的ip，复制无线网络的ipv4地址，如192.168.0.62 2.为项目设置运行ip 打开vue项目的config文件夹中的index.js文件，在dev对象中，host的值...
vue/cli3 使用手机访问本地项目
muzidigbig的博客
04-12 2039
vue-cli3 移除了 config 文件夹,多出一个 vue.config.js(===webpack.config.json) 的文件! 根据官方所描述: vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 官方链接:https://cli.vuejs.org/zh/config/ 这里只写一下怎么使用手机访问vue的本地项目,多的我就不赘述了! 第一步: win+
如何在移动端访问本地vue的项目？
cnailili的博客
06-26 1484
现如今移动端异常火爆，今天工作中需要写一个自定定位城市的功能，虽然浏览器也可以看到移动端的样式，但是自己心里还是不靠谱（devicemotion监听设备速度变化，deviceorientation监听设备方向变等事件）也必须在移动端预览效果 那如何在移动端访问本地的项目？ 1、必需手机电脑在相同WiFi下 2、查看WiFi下的IP地址 （命令：ipconfig） 3、更改config.js文件 4、重新运行vue项目，域名已经更改，在移动端运行自己的项目吧！ ...
手机端如何访问本地vue+vite项目,实现实时调试?
铃儿响叮当
05-23 1606
h5（vue+vite）嵌入app后，出现某种问题时，需要每次发布坏境后，才能才看效果，这种来回很耗时间，本文章在于解决手机端直接访问本地启动应用项目，无需重复发布坏境。本地重新启动项目，并打开网址，将浏览器中打开的网址直接复制到手机端，点开即可直接浏览项目。port：随意写一个没有被占用的端口。host: 第一步复制的IPv4地址。，查看IPv4地址，并复制。
使用手机访问vue项目
dt1991524的博客
12-24 1033
在做vue项目测试时，需要放在手机上调试，那么如何放在手机上调试呢？毋庸置疑，直接使用ip地址+端口号用手机去访问电脑上的vue项目。 1. 把host中的改为“自己电脑的IP地址” 2.改为‘127.0.0.1’ 3.改为‘localhost’ 用上述3中方式就可以放在手机上测试啦！...
vue本地项目手机访问
u010624421的专栏
02-19 544
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
前端开发：通过手机端访问本地vue开发项目
yman_pro的博客
07-08 6538
故事背景 卤煮用的是vue框架，当我们想用手机获取电脑访问一下正在开发的项目，岂不是狂拽酷炫~ 实现教程 1、保证你的项目跑起来了，并且要预览的设备和你开发的设备连接同一个网络（不在同一个网络，那基本废了，另寻他法吧） 2、查看开发设备的IP(小黑框敲指令：windows–ipconfig、mac–ifconfig ) 3、找到package.json文件，给运行项目的指令后面添加一个 --host 指令，写入查到的IP（根据个人项目来，一般vue 2.0是dev，卤煮的是3.0：serve，当然你可以自定
电脑和手机在同一个wifi下怎么访问本地vue项目地址
06-02
首先，需要确保电脑和手机都连接在同一个WiFi网络下。 然后，在电脑上启动Vue项目，可以通过命令 `npm run serve` 或者 `yarn serve` 启动本地开发服务器。默认情况下，Vue项目会在本地的 `http://localhost:8080/` 地址上运行。 接着，在手机上打开浏览器，输入电脑的局域网IP地址和端口号，例如 `http://192.168.0.100:8080/`，就可以访问电脑上运行的Vue项目了。其中，`192.168.0.100` 是电脑的局域网IP地址，可以在电脑上通过命令 `ipconfig` 查看。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值