解決方法
1. 修改 vite.config.js 配置
2. 通過 Vite CLI 配置
3. 修改 npm 腳本
起因
當使用 Vite 構建項目后，需要通過局域網中的電腦或手機訪問服務調試時，發現通過 IP + 端口無法訪問。
問題重現
當運行 npm run dev | serve 命令時，會顯示一下內容。
> vite-vue@0.0.0 serve /Users/UserName/Workspace/vue-vite
> vite | vite preview
vite v2.3.7 build preview server running at:
> Local: http://localhost:3000 | 5000/
> Network: use `--host` to expose
1
問題原因
當 局域網 中另一台設備需要訪問該服務時，必須通過本機 IP + 端口 訪問。
嘗試訪問后，發現找不到這個服務，原因是 沒有 將服務暴露在網絡中。
解決方法
在控制台會顯示 user --host to expose（使用 --host 暴露網絡）
通常我們都會在 npm run dev | serve 的后邊拼接上 --host
執行 npm run dev | serve --host 后控制台還是會顯示 Netvork: user --host to expose
server.host
類型： string
默認： ‘127.0.0.1’
指定服務器應該監聽哪個 IP 地址。 如果將此設置為 0.0.0.0 將監聽所有地址，包括局域網和公網地址。
於是通過查閱 文檔 發現了三種解決方案：
1. 修改 vite.config.js 配置
在根目錄下的 vite.config.js 文件中添加以下內容
import vue from '@vitejs/plugin-vue'
/**
* https://vitejs.dev/config/
* @type {import('vite').UserConfig}
*/
export default {
plugins: [vue()],
server: { // ← ← ← ← ← ←
host: '0.0.0.0' // ← 新增內容 ←
} // ← ← ← ← ← ←
}
1
2. 通過 Vite CLI 配置
執行 npx vite --host 0.0.0.0 命令后，就可以通過 http://10.56.116.128:3000/ 訪問了。
vite v2.3.7 dev server running at:
> Local: http://localhost:3000/
> Network: http://10.56.116.128:3000/
ready in 301ms.
1
3. 修改 npm 腳本
修改 package.json 文件中 scripts 節點下的腳本，如下：
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"serve": "vite preview --host 0.0.0.0"
}
1
原文鏈接：https://blog.csdn.net/qq_41664096/article/details/118961381