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"

  },