Vue3 - 解决项目启动后浏览器无法访问问题（Network: use --host to expose）

1，问题描述

（1）使用如下命令创建一个 Vite + Vue3 项目：

1	npm init vue@latest my-app

（2）创建后进入项目文件夹并启动项目：

1 2	cd my-app npm run dev

（3）上述命令执行后，控制台显示“Network: use --host to expose”

（4）使用浏览器访问“http://localhost:5173”无法打开页面，提示“无法访问此网站localhost 拒绝了我们的连接请求。请试试以下办法：检查网络连接，检查代理服务器和防火墙”

2，问题原因

根据“Network: use --host to expose”提示，要求服务使用 host 来进行暴露，即要将服务暴露成“IP + 端口号”进行访问。

3，解决办法

（1）首先修改 package.json 文件，将启动项中的 dev 和 serve 增加 --host 参数。

（2）接着修改 vite.config.ts（或 vite.config.js），增加 server 选项配置，并 server 中配置 host 内容（如下高亮部分内容）：

1 2 3 4 5 6 7

export default defineConfig({   plugins: [     vue(),   ],   server:{         host:'0.0.0.0',        },

（3）修改完毕后再次启动服务，可以看到本机的 IP 和端口号暴露出来了：

（4）使用浏览器访问“http://localhost:5173”可以正常显示出页面了：

原文出自：www.hangge.com  转载请保留原文链接：Vue3 - 解决项目启动后浏览器无法访问问题（Network: use --host to expose）