在 Nuxt.js 中开启 IP 访问的方法
问题场景
开发时需要让局域网其他设备访问本地 Nuxt 项目(如手机测试、同事联调等)
解决方案
修改 nuxt.config.ts
配置文件,添加 devServer
配置项:
export default defineNuxtConfig({
devServer: {
host: '0.0.0.0', // 监听所有网络接口
port: 3000 // 默认端口(可自定义)
}
})
配置说明
配置项 | 值 | 作用 |
---|---|---|
host | 0.0.0.0 | 允许通过本地IP和localhost访问 |
port | 3000 | 开发服务器端口(可改为其他端口) |
访问方式
- 本地访问:
http://localhost:3000
- 同局域网访问:
http://[你的本地IP]:3000
(可通过ipconfig
/ifconfig
查看本地IP)
注意事项
- 需要确保防火墙允许该端口的入站连接
- 生产环境无需此配置
- 如果修改端口号,需要同步调整其他相关配置(如Vite代理)