【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量2.5k 收藏 7
点赞数 2
分类专栏： Vue3 文章标签： vue.js 智能手机 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43614372/article/details/129321858
版权

需求

手机端访问电脑端开发的项目。

解决需求

1. 环境

手机与电脑连接同一个WiFi（或手机开热点给电脑连），保证手机与电脑在同一局域网。

2. 配置

  1. 找到 vue3 的配置文件 - package.json (我这里用的是vite+vue3)
  2. 找到dev配置项，输入 –host 0.0.0.0，代码如下
 "scripts": {
    "dev": "vite --host  0.0.0.0",
  },

图片演示
在这里插入图片描述

3. 运行

npm run dev 运行项目，访问Network地址 ,如下图:
在这里插入图片描述

故障 | 问题

以上步骤无误后，有些小伙伴手机端还是访问不了vue项目。

若手机端访问不了，说明电脑未关闭防火墙，关闭防火墙后即可访问。

防火墙关闭

  1. 设置里搜防火墙，点击 Window Default 防火墙
    在这里插入图片描述

  1. 点击 启用货关闭Window Default 防火墙
    在这里插入图片描述

  2. 关闭防火墙，如下图
    在这里插入图片描述

关闭后即可通过手机端访问

End

2023/3/3 15:59

晴朗

【推荐】
【TinyMce】element-plus的覆盖TinyMce通用解决方法&TinyMce被遮挡

【Vue3&tinymce】Vue3使用tinymce富文本编辑器

视觉CG
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
完美解决通过IP地址访问VUE项目的问题
10-15
主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
手机访问电脑上的localhost网址以调试项目
分享--------留住生活
07-03 3556
当手机访问电脑上项目部署的路径时，出现长时间无法响应，访问失败的情况，可以试试以下几步： 一、首先检查手机的访问路径，将localhost替换为电脑的ip地址，win+R，输入cmd，打开命令提示符，然后输入ipconfig，找到本机电脑的ip地址。我的电脑ip是192.168.0.59。 二、检查电脑防火墙是否关闭，控制面板-->右上角查看方式改为大图标-->防火墙，如下图所......
当Vue项目启动后，通过IP地址方式在相同网络段的其他电脑上无法访问前端页面？
舒一笑的博客
02-26 857
默认情况下，许多开发服务器（如Vue CLI的）只监听localhost（127.0.0.1），这意味着它们只能接受来自本机的连接。为了使其能够接受来自网络上其他设备的连接，需要配置服务以监听所有网络接口（0.0.0.0）。：Windows或其他操作系统的防火墙可能阻止了对应用程序使用的端口的访问。如果服务正在运行，但其他设备无法连接，可能需要配置防火墙以允许外部设备访问该端口。：确保所有设备都连接到同一网络，并且没有子网或VPN配置阻止它们之间的通信。
如何在手机上访问vue项目
Lskytory的博客
08-21 5134
如何在手机上访问vue项目： (借鉴) 1.找到无线网络局域网IP 按住window+R键，输入cmd，回车，在弹出的框内，输入ipconfig，回车 在展示的结果中，有一个以太网的ip，有一个无线网的ip，复制无线网络的ipv4地址，如192.168.1.3 2.为项目设置运行IP 打开vue项目的config文件夹中的index.js文件，在dev对象中，host的值由’local...
使用手机调试vue项目 --亲测可用！
x-dragon8899的博客
07-25 711
目录一、确保手机与做项目的电脑连同一个wifi二、打开命令窗口，输入`ipconfig`三、找到无线网适配器的ipv4地址并复制四、去vue的项目下，修改config文件下的index.js文件。将host更改为电脑的IPv4地址。五、保存运行，在手机打开http://ipv4:8080即可访问 一、确保手机与做项目的电脑连同一个wifi 二、打开命令窗口，输入ipconfig 三、找到无线网适配器的ipv4地址并复制 四、去vue的项目下，修改config文件下的index.js文件。将host更改为
vue移动端项目怎么在手机上运行打开
weixin_49577940的博客
07-09 5690
因为现在做的是一个手机端项目 , 所以要在手机上运行看适配, 上传文件, 这几天就上网学了下怎么弄在手机上看, 其实步骤很简单 , 但是想记录一下学习到新技能的开心 ^_^ 手机和电脑连同一个wifi , 或者电脑连你手机的热点 一 , 按电脑window+R , 打开这个页面, 输入cmd,点确定 二 , 在出现的黑窗口中输入ipconfig , 按回车 , 复制IPv4的地址 三 , 打开你项目config文件夹下的index.js,把host后面的地址改成你刚刚复制的.
手机端访问本地vue项目
a12hhhe的博客
08-27 4131
1.电脑和手机共用同一网络 2.查看电脑IP 命令行输入 ipconfig ，找到IPv4 地址就是你的本机IP地址；注意不是在浏览器直接输入IP显示的那个外网IP地址 3.在Vue项目下找到config目录下的index.js文件 把index.js中的host值 localhost 修改为你的 IP 地址 4.注意把项目中的地址，如下：localhost都改为以上IP地址 ...
vue项目手机端访问不了
weixin_45682701的博客
09-08 3640
window系统，win+R输入 cmd打开，cmd中输入ipconfig查询ipv4地址。2.将config中的indexjs里host换成自己的ip地址。1.首先手机电脑连接同一个WiFi，并且把笔记本电脑以太网拔了。vue项目中配置域名host。这时候手机就可以访问成功了。3.防火墙检查是否关闭。
手机上运行vue3.0项目
niannianxi的博客
09-05 2494
在手机上调试vue3.0项目时需进行以下几步： 1. 按下windows+R，输入cmd，在电脑终端下，输入ipconfig，获取ip地址（IPv4对应的值） 2.在与package.json同级目录下创建vue.config.js文件 在vue.config.js中输入第一步获取的ip地址及端口号 ps：vue-cli3工程文件夹中是没有vue.config.js这个文件的，所以我们需要自己创建一个，有该文件在文件内输入即可‘ 3.在编译器上运行npm run dev,到手机上输入项目启动后 netw
vue创建的项目如何在手机上调试
qq_44741378的博客
09-24 1039
1.手机和电脑要在同一个网络下。 2.找到电脑的IPv4地址。通过（菜单键+R键）快捷方式打开左下角运行窗口，在窗口输入CMD回车，进入命令窗口：输入ipconfig回车获取IPv4地址。 3.然后去vue的项目下，修改config文件下的index.js文件。将host更改为电脑的IPv4地址。(例如我的IPV4地址是:192.168.0.126) 4.在电脑上启动vue项目，然后在手机浏览器打...
vue在手机中通过本机IP地址访问webApp的方法
12-09
vue中通过localhost:8080,就可以访问浏览项目，但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp，或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访问webApp的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回
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快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 349
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 126
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 109
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 509
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 219
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue3手机端项目搭建
09-09
为了搭建一个vue3手机端项目，你可以按照以下步骤进行操作： 1. 安装Vue CLI：Vue CLI是一个官方发布的命令行工具，用于快速创建Vue项目。你可以使用以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目：使用Vue CLI创建一个新的Vue项目非常简单。你可以通过运行以下命令来创建一个基本的Vue项目： ``` vue create my-project ``` 3. 选择配置：在创建项目时，Vue CLI会提示你选择一些配置选项。对于手机端项目，你可以选择默认的配置，或者根据你的需求进行自定义配置。 4. 安装必要的依赖：在项目创建完成后，你需要安装一些必要的依赖。根据你的具体需求，你可能需要安装Vue Router、axios等依赖。你可以使用以下命令来安装Vue Router： ``` npm install vue-router ``` 5. 配置Vue Router：在项目中使用Vue Router来管理页面路由。你可以在项目的入口文件中导入Vue Router，并配置路由表。在你的Vue组件中，你可以使用`<router-link>`和`<router-view>`组件来实现页面的导航和渲染。 6. 使用vant或其他UI组件库：如果你想在项目中使用UI组件库，可以选择vant或其他适合的库。按照库的文档进行安装和配置。 7. 开发代码：根据你的项目需求，开始开发你的Vue组件。你可以使用Vue的单文件组件编写你的页面、样式和逻辑。 8. 编译和打包：完成代码开发后，你可以使用Vue CLI提供的命令来编译和打包你的项目。根据你的需求，可以选择不同的构建配置和打包方式。 以上是搭建一个vue3手机端项目的一般步骤。你可以根据具体需求进行适当的调整和扩展。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值