首页 前端知识 Vue3使用IP地址访问(解决 ERR_CONNECTION_REFUSED)

Vue3使用IP地址访问(解决 ERR_CONNECTION_REFUSED)

2024-05-29 10:05:57 前端知识 前端哥 161 485 我要收藏

Vue3使用IP地址访问

问题

Vue3 项目,运行后,在本机浏览器中,直接使用 localhost 访问(或 127.0.0.1),能够正确访问。

但是使用Vue服务所在主机的内网 IP地址 ,无法访问,报错:ERR_CONNECTION_REFUSED

示例如下:

http://127.0.0.1:5173/
在这里插入图片描述

http://192.168.XXX.XXX:5173/
在这里插入图片描述

原因

默认配置,只能通过 localhost 访问。

如需使用网络 IP地址 访问,需要修改 Vue 项目的配置文件 package.json

默认配置时运行项目,提示只有一个 Local 访问地址。

在这里插入图片描述

解决方案

package.json 文件中,"scripts" - "dev" 属性,添加配置 --host 0.0.0.0

配置代码

核心配置如下:

"dev": "vite --host 0.0.0.0"

package.json 全部配置如下:

{
  "name": "hello-world",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.4"
  }
}

配置代码示例

在这里插入图片描述

重新运行项目

  1. 重新运行 Vue 项目,Windows 会弹出页面提示授权。(请谨慎考虑是否授权,如所在网络有风险,请勿授权。不授权无法IP地址访问Vue服务,无需进行下面的步骤)

  2. 授权后,运行成功。

  3. 除了原来的 Local 访问地址,多出来一个 Network 访问地址。

在这里插入图片描述

本机浏览器中打开

在本机浏览器中,使用 IP地址 打开网页,能够正常显示。

在这里插入图片描述

手机浏览器中打开(同一局域网)

手机浏览器中,使用 IP地址 打开网页,能够正常显示。(手机和Vue服务所在电脑,需连接同一局域网)。

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9999.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!