vite配置IP地址

你想要在 Vite 项目中配置可访问的 IP 地址，核心是让项目不仅能在本地 localhost 访问，还能通过本机的局域网 IP 被其他设备访问。

配置方法

Vite 中配置 IP 主要通过修改项目根目录下的 vite.config.js（或 vite.config.ts）文件，核心是配置 server 选项：

1. 基础配置（允许局域网访问）

这是最常用的配置，让项目可以通过 localhost、127.0.0.1 和本机局域网 IP 访问：

javascript

运行

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // 如果是Vue项目，非Vue项目可删除

export default defineConfig({
  plugins: [vue()], // 非Vue项目删除此行
  server: {
    // 关键配置：允许外部访问（局域网IP）
    host: '0.0.0.0',
    // 可选：指定端口，默认是 5173
    port: 5173,
    // 可选：自动打开浏览器
    open: true,
    // 可选：端口被占用时自动切换端口
    strictPort: false
  }
})

2. 指定固定 IP（不推荐）

如果想强制绑定某个固定 IP（不建议，因为不同环境 IP 可能变化），可以直接写具体 IP：

javascript

运行

server: {
  // 绑定本机的具体IP（需替换为你自己的IP，如 192.168.1.100）
  host: '192.168.1.100',
  port: 5173
}

配置说明

• host: '0.0.0.0'：表示监听所有可用的网络接口，Vite 启动后会自动识别并显示本机的局域网 IP（如 192.168.1.100:5173），手机 / 其他电脑在同一局域网下输入这个地址就能访问。
• 启动项目后，终端会输出如下信息，其中 Network 就是局域网访问地址：plaintext VITE v5.0.0 ready in 300 ms ➜ Local: http://localhost:5173/ ➜ Network: http://192.168.1.100:5173/
• 前置条件：确保你的电脑防火墙没有拦截 5173 端口，且手机 / 其他设备和电脑在同一 Wi-Fi / 局域网下。

总结

1. 核心配置是 server.host: '0.0.0.0'，这是实现局域网访问的关键，无需手动指定具体 IP。
2. 可选配置 port 可自定义端口，open: true 可启动项目后自动打开浏览器。
3. 启动项目后，终端会显示 Local（本地）和 Network（局域网）两个访问地址，直接使用即可。