在 Nuxt.js 中开启 IP 访问的方法

发表于 2025-08-17 06:12:13 分类于 默认分类 阅读量 91

在 Nuxt.js 中开启 IP 访问的方法

问题场景

开发时需要让局域网其他设备访问本地 Nuxt 项目(如手机测试、同事联调等)

解决方案

修改 nuxt.config.ts 配置文件,添加 devServer 配置项:

export default defineNuxtConfig({
  devServer: {
    host: '0.0.0.0', // 监听所有网络接口
    port: 3000       // 默认端口(可自定义)
  }
})

配置说明

配置项作用
host0.0.0.0允许通过本地IP和localhost访问
port3000开发服务器端口(可改为其他端口)

访问方式

  • 本地访问:http://localhost:3000
  • 同局域网访问:http://[你的本地IP]:3000
    (可通过 ipconfig/ifconfig 查看本地IP)

注意事项

  1. 需要确保防火墙允许该端口的入站连接
  2. 生产环境无需此配置
  3. 如果修改端口号,需要同步调整其他相关配置(如Vite代理)
码字奇遇记
一路向前,山海自平