手机访问本地vue项目

最新推荐文章于 2024-05-23 10:54:37 发布
原创 最新推荐文章于 2024-05-23 10:54:37 发布 · 1.3k 阅读 · 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应用。

手机访问本地vue项目

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

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

个人纪录，方便回忆

挖博工
关注
同wifi时用手机访问运行的项目-vue3的H5项目从0到1工程化落地经验篇4
王月Lydia的博客
04-25 616
这是vue3的H5项目从0到1工程化落地经验的第4篇，有了这个系列你可以从0创建一个自己的h5项目，并且里边涉及到的常用的点都会包含到。本来想写成一篇，但是太长了，搞得编辑器都卡了。所以我拆分成了一系列的文章，在文章尾部能看到其他链接，如有不当之处，欢迎大神不吝赐教。本篇解决同wifi下手机如何访问电脑起的项目的问题。
【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法
此人太懒，没有任何简介
03-03 4510
【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法
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项目
liuzaixi的博客
04-26 1680
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
手机如何访问vue项目localhost
少油少盐不要辣
04-03 1315
在您的手机浏览器中输入您计算机的IP地址，加上Vue项目的端口号。（对于Mac/Linux）来查看计算机的IP地址。这将允许您在手机上访问本地主机上的Vue应用程序。的条目，这是计算机的本地IP地址。最后，还需要关闭电脑的防火墙设置。（对于Windows）或。来启动Vue开发服务器，
vue:手机访问本地项目
qq_45061461的博客
06-28 1069
3.手机浏览器输入地址 : 电脑ip + 项目端口号(比如:8080)1.需要在项目根目录config文件夹中的index.js中配置。2.需要电脑的ip地址 需要在同一个局域网环境中。查看电脑 :IPv4 就是ip。
完美解决通过IP地址访问VUE项目的问题
10-15
在开发Vue项目时，我们通常使用`localhost`或者`127.0.0.1`来运行项目，但这只允许我们在本地环境进行测试。如果需要让其他设备（如手机或另一台电脑）访问我们的Vue应用，我们就需要通过IP地址来访问。本文将详细...
vue-cli启动本地服务局域网不能访问的原因分析
08-28
标题和描述中提到的问题就是，当你尝试通过 IP 地址而非 `localhost` 访问本地 Vue CLI 项目时，其他设备无法访问。这个问题的根源在于 Vue CLI 的配置。 默认情况下，Vue CLI 的配置文件（位于 `config/index.js`...
vue项目怎么在手机查看
豪先生的博客
09-24 4345
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
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_47540149的博客
05-08 968
在项目的package.json中 scripts下的dev中的后面加上–host 0.0.0.0
vue/cli3 使用手机访问本地项目
muzidigbig的博客
04-12 2074
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 1508
现如今移动端异常火爆，今天工作中需要写一个自定定位城市的功能，虽然浏览器也可以看到移动端的样式，但是自己心里还是不靠谱（devicemotion监听设备速度变化，deviceorientation监听设备方向变等事件）也必须在移动端预览效果 那如何在移动端访问本地的项目？ 1、必需手机电脑在相同WiFi下 2、查看WiFi下的IP地址 （命令：ipconfig） 3、更改config.js文件 4、重新运行vue项目，域名已经更改，在移动端运行自己的项目吧！ ...
手机端如何访问本地vue+vite项目,实现实时调试?
铃儿响叮当
05-23 1813
h5（vue+vite）嵌入app后，出现某种问题时，需要每次发布坏境后，才能才看效果，这种来回很耗时间，本文章在于解决手机端直接访问本地启动应用项目，无需重复发布坏境。本地重新启动项目，并打开网址，将浏览器中打开的网址直接复制到手机端，点开即可直接浏览项目。port：随意写一个没有被占用的端口。host: 第一步复制的IPv4地址。，查看IPv4地址，并复制。
vue项目本地实现手机预览
qq_37902065的博客
05-19 4086
1.windows下打开命令ipconfig行查看本机ip地址2.修改config下的index.js文件3直接把地址发到手机即可访问
使用手机访问vue项目
dt1991524的博客
12-24 1053
在做vue项目测试时，需要放在手机上调试，那么如何放在手机上调试呢？毋庸置疑，直接使用ip地址+端口号用手机去访问电脑上的vue项目。 1. 把host中的改为“自己电脑的IP地址” 2.改为‘127.0.0.1’ 3.改为‘localhost’ 用上述3中方式就可以放在手机上测试啦！...
vue本地项目手机访问
u010624421的专栏
02-19 552
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
前端开发：通过手机端访问本地vue开发项目
yman_pro的博客
07-08 6594
故事背景 卤煮用的是vue框架，当我们想用手机获取电脑访问一下正在开发的项目，岂不是狂拽酷炫~ 实现教程 1、保证你的项目跑起来了，并且要预览的设备和你开发的设备连接同一个网络（不在同一个网络，那基本废了，另寻他法吧） 2、查看开发设备的IP(小黑框敲指令：windows–ipconfig、mac–ifconfig ) 3、找到package.json文件，给运行项目的指令后面添加一个 --host 指令，写入查到的IP（根据个人项目来，一般vue 2.0是dev，卤煮的是3.0：serve，当然你可以自定
vue项目部署本地怎么用手机访问
最新发布
08-07
### 通过手机访问本地部署的 Vue 项目 确保本地服务器和手机处于同一局域网中。例如，若本地服务器的 IP 地址为 `192.168.1.100`，且服务运行在 `8080` 端口，则在手机浏览器中输入以下地址即可访问： ``` ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值