Vite启动后提示“Network: use `--host` to expose“,且无法通过网络IP访问服务

原因:

使用 Vite 构建项目后,需要通过局域网中的电脑或手机访问服务调试时,发现通过 IP + 端口无法访问。

 


 重现:

当运行 npm run dev | serve 命令时,会显示以下内容。

 


 问题原因

当局域网中另一台设备需要访问该服务时,必须通过本机IP + 端口 访问。

尝试访问后,发现找不到这个服务,原因是没有将服务暴露在网络中。

 


 解决办法

在控制台会显示 user --host to expose(使用 --host 暴露网络)
通常我们都会在 npm run dev | serve 的后边拼接上 --host

执行 npm run dev | serve --host 后控制台还是会显示 Netvork: user --host to expose

 通过查阅文档,发现了三种解决方案:

1、修改 vite.config.js 配置

在根目录下的 vite.config.js 文件中添加以下内容

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host:'0.0.0.0'
  }
})


复制代码

2、通过vite cli 配置

执行  npx vite --host 0.0.0.0  命令后,就可以通过 http://192.168.2.32:3000/ 访问了

 vite v2.8.6 dev server running at:

  > Network:  http://192.168.2.32:3000/
  > Local:    http://localhost:3000/

  ready in 543ms.

 3、修改npm 脚本

修改 package.json 文件中 scripts 节点下的脚本,如下:

"scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "serve": "vite preview --host 0.0.0.0"
  },

  

 

 

posted @   会吃鱼的猫123  阅读(1599)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示