當(dāng)使用 Vite 構(gòu)建項目后，發(fā)現(xiàn)只有localhost + 端口 服務(wù)，沒有 IP + 端口服務(wù)。
運行npm run dev，終端提示Vite啟動后提示Network: use '--host' to expose。

Vite

package.json中腳本配置

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

問題復(fù)現(xiàn)

當(dāng)運行 npm run dev | serve 命令時，會顯示一下內(nèi)容。

> vite-vue-demo@1.0.0
> vite | vite preview

vite v2.5.1 build preview server running at:

> Local: http://localhost:3000 | 5000/
> Network: use `--host` to expose

解決

• 配置vite.config.js

export default defineConfig(({ mode })=>({
  // ..
  server: {
    host: '0.0.0.0',
  },
  // ..
}))

• 配置package.json

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

執(zhí)行npm run dev命令

vite v2.5.1 dev server running at:

> Local:    http://localhost:3000/
> Network:  http://xxx.xx.xxx.xx:3000/

《Vue3學(xué)習(xí)與實戰(zhàn)》系列

• Vue3學(xué)習(xí)與實戰(zhàn) · 組件通信
• Vue3學(xué)習(xí)與實戰(zhàn) · 全局掛載使用Axios
• Vue3學(xué)習(xí)與實戰(zhàn) · 配置使用vue-router路由
• Vue3學(xué)習(xí)與實戰(zhàn) · Vuex狀態(tài)管理
• vue3 + vite實現(xiàn)異步組件和路由懶加載
• Vite+Vue3+Vant快速構(gòu)建項目

歡迎訪問：個人博客地址