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

这篇具有很好参考价值的文章主要介绍了【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

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

解决需求

1. 环境

手机与电脑连接同一个WiFi(或手机开热点给电脑连),保证手机与电脑在同一局域网。


2. 配置

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

图片演示
手机访问vue项目,Vue3,vue.js,智能手机,前端

3. 运行

npm run dev 运行项目,访问Network地址 ,如下图:
手机访问vue项目,Vue3,vue.js,智能手机,前端

故障 | 问题

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

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

防火墙关闭

  1. 设置里搜防火墙,点击 Window Default 防火墙
    手机访问vue项目,Vue3,vue.js,智能手机,前端

  1. 点击 启用货关闭Window Default 防火墙
    手机访问vue项目,Vue3,vue.js,智能手机,前端

  2. 关闭防火墙,如下图
    手机访问vue项目,Vue3,vue.js,智能手机,前端

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


End

2023/3/3 15:59

晴朗


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

【Vue3&tinymce】Vue3使用tinymce富文本编辑器文章来源地址https://www.toymoban.com/news/detail-578314.html

到了这里,关于【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面,localhost拒绝了我们的连接请求

    前端页面使用的是vue,vue项目启动成功,没有任何报错,服务控制台已出现APP访问地址,如下图所示: 点击访问地址,浏览器打开后页面先是空白,然后过了一会儿显示无法访问此网站,localhost拒绝了我们的连接请求页面,信息如下: 出现此问题的原因有以下几种:请挨个

    2023年04月25日
    浏览(68)
  • nginx部署vue项目,给访问路径加前缀的方法:vue.config.js配置publicPath和nginx配置alias

    本文主要涉及到 Vue.js 项目部署在 Nginx 上的相关问题。其中,publicPath 选项可以用于设置 Vue.js 项目的访问路径前缀,alias 指令可以用于 Nginx 中将请求路径映射到指定的文件系统路径。同时,通过设置 Nginx 配置文件,可以将多个 Vue.js 项目部署在同一个域名下的不同路径中。

    2024年02月16日
    浏览(52)
  • Vue3.0跨端Web SDK访问微信小程序云储存,文件上传路径不存在/文件受损无法显示问题(已解决)

    需要vue3.0作为pc端的后台管理来连接微信小程序客户端 需要Web SDK的引入,实现vue3.0接入云开发环境 需要以云环境作为线上服务器,将vue3.0上传的本地文件通过云环境进入云储存,并将文件在云端生成云端快捷访问路径及http/https路径(公网路径) 修改云端储存的权限代码:

    2024年02月08日
    浏览(51)
  • 解决vue3+vite项目中引入mockjs失败的问题--无法找到模块“mockjs”的声明文件

     看到上面报错,根据提示 修改声明方式 declare module \\\'mockjs\\\'  我们修改一下引入的声明,发现修改之后仍然报错;    解决方法: 需要在vite-env.d.ts文件中,添加  declare module \\\'mockjs\\\',保存即可  然后就可以正常使用了  

    2024年02月11日
    浏览(47)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(52)
  • Vue3.0 vue.js.devtools无法显示Pinia调试工具

    之前的配置方式: 更新配置方式: 设置之后即可显示调试工具

    2024年03月11日
    浏览(54)
  • Vue3 在vite中运行无法使用外部ip访问

    使用vite创建的vue项目运行时,只能使用localhost(127.0.0.1)访问,如果使用外部ip,提示使用–host参数,可使用npm run dev --host,不起作用,在host后增加0.0.0.0也不起作用。需要运行npx vite --host 0.0.0.0。还有一个办法,就是在vite.config.js中增加配置server:

    2024年02月16日
    浏览(44)
  • vue项目访问服务器时:WebSocket connection to ‘wss://XXXX/‘的解决方法

    关于WebSocke的介绍:新手入门:websocket 简单来说,WebSocket 为web应用程序客户端和服务端之间(客户端服务端)提供了一种全双工通信机制,报错是因为发送报文的过程出现问题。 我的报错如下: 程序可以正常运行使用,但一直打印报错太难受了,问了一下同事,也查了一下

    2024年02月11日
    浏览(46)
  • vue初体验1:新建vue3项目并启动访问(mac)

    一、 安装hbuilderx HBuilderX是一款基于Electron框架开发的跨平台的集成开发环境(IDE), 是为前端开发者服务的通用 IDE,或者称为编辑器;提供比其他工具更优秀的 vue 支持 。HBuilderX集成了多种开发工具和语言,包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等,可以帮助开发者

    2024年02月08日
    浏览(35)
  • vue本地能够访问图片,打包项目之后图片无法访问

    上述写法本地能够正常访问图片,但是打包之后无法正常访问,将 boxHerf 换成下列写法即可解决 注意:new URL(url,import.meta.url) 中的参数 url ,不能如下面定义变量拼接 上述开发没问题,但是打包会报错,不支持 import.meta.url new URL() 创建一个新 URL 对象的语法:new URL(url, [base])

    2024年02月06日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包