Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）

男娘i 2023-10-08 18:52 6阅读 0赞

## Vue3使用IP地址访问 ##

### 问题 ###

Vue3 项目，运行后，在本机浏览器中，直接使用 `localhost` 访问（或 `127.0.0.1`），能够正确访问。

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

示例如下：

> http://127.0.0.1:5173/  
> ![在这里插入图片描述][5995f17ac1d4427eb9fcb46a66f0d2d8.png]

> http://192.168.XXX.XXX:5173/  
> ![在这里插入图片描述][84a959e8a7604803af23c48cd9f8e9f9.png]

### 原因 ###

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

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

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

![在这里插入图片描述][0caca36d89084be0a5360a6ccfbcacf6.png]

### 解决方案 ###

`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"
      }
    }

#### 配置代码示例 ####

![在这里插入图片描述][8d5e0d68fad040c8a17e713d9e49b8ff.png]

#### 重新运行项目 ####

1.  重新运行 Vue 项目，Windows 会弹出页面提示授权。**`（请谨慎考虑是否授权，如所在网络有风险，请勿授权。不授权无法IP地址访问Vue服务，无需进行下面的步骤）`**
2.  授权后，运行成功。
3.  除了原来的 Local 访问地址，多出来一个 Network 访问地址。

![在这里插入图片描述][b59517176d8d41ca84127790a892c02b.png]

#### 本机浏览器中打开 ####

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

![在这里插入图片描述][b0f5bd93c42e496fbad6cd87bf5d5083.png]

#### 手机浏览器中打开（同一局域网） ####

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

![在这里插入图片描述][38a7e273cd0e43c8b16a6d51b686b75b.png]

[5995f17ac1d4427eb9fcb46a66f0d2d8.png]: https://img-blog.csdnimg.cn/5995f17ac1d4427eb9fcb46a66f0d2d8.png
[84a959e8a7604803af23c48cd9f8e9f9.png]: https://img-blog.csdnimg.cn/84a959e8a7604803af23c48cd9f8e9f9.png
[0caca36d89084be0a5360a6ccfbcacf6.png]: https://img-blog.csdnimg.cn/0caca36d89084be0a5360a6ccfbcacf6.png
[8d5e0d68fad040c8a17e713d9e49b8ff.png]: https://img-blog.csdnimg.cn/8d5e0d68fad040c8a17e713d9e49b8ff.png
[b59517176d8d41ca84127790a892c02b.png]: https://img-blog.csdnimg.cn/b59517176d8d41ca84127790a892c02b.png
[b0f5bd93c42e496fbad6cd87bf5d5083.png]: https://img-blog.csdnimg.cn/b0f5bd93c42e496fbad6cd87bf5d5083.png
[38a7e273cd0e43c8b16a6d51b686b75b.png]: https://img-blog.csdnimg.cn/38a7e273cd0e43c8b16a6d51b686b75b.png