Vue3使用IP地址访问（解决 ERR_CONNECTION

这篇具有很好参考价值的文章主要介绍了Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 访问地址。

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

解决方案

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