Vite 使用本地ip+localhost訪問服務

默認配置

在vite.config.js中，如果未配置server.host，默認服務將以localhost進行啟動，此時我們可以通過localhost:port或127.0.0.1:port進行應用訪問

import { resolve } from 'path'
function pathResolve(dir: string): string {
  return resolve(process.cwd(), '.', dir)
}
export default defineConfig({
  resolve: {
    alias: {
      '@': pathResolve('src')
    }
  },
  server: {
    port: 8888,
    open: true
  },
  build: {
    assetsInlineLimit: 4096, // 小於此閾值的導入或引用資源將內聯為 base64 編碼，以避免額外的 http 請求。設置為 0 可以完全禁用此項
  }
})

終端控制面板

  > Local: http://localhost:8888/
  > Network: use `--host` to expose

IP配置

如果配置了server.host的值為0.0.0.0，靜態資源服務將以localhost和本地Ip進行啟動，此時我們可以通過localhost:port或127.0.0.1:port或localIp:port進行應用訪問

import { resolve } from 'path'
function pathResolve(dir: string): string {
  return resolve(process.cwd(), '.', dir)
}
export default defineConfig({
  resolve: {
    alias: {
      '@': pathResolve('src')
    }
  },
  server: {
    host: '0.0.0.0'
    port: 8888,
    open: true
  },
  build: {
    assetsInlineLimit: 4096, // 小於此閾值的導入或引用資源將內聯為 base64 編碼，以避免額外的 http 請求。設置為 0 可以完全禁用此項
  }
})

以上增加的host配置，效果等同於在package.json中為vite命令增加參數 --host

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

終端控制面板

  > Network:  http://10.6.96.17:8888/
  > Local:    http://localhost:8888/