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