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

作者：hangge | 2024-01-30 08:52

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

npm init vue@latest my-app

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

cd my-app
npm run dev

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

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

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

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

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

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

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

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

其他