在项目中运用os 模块获取本机ip地址并运用到终端启动成功打开network

一、安装os模块

os 模块是 Node.js 的内置模块,不需要额外安装

二、在项目中新建一个名为 getLocalIpAddress.js 的文件

javascript 复制代码
// getLocalIpAddress.js
const os = require('os');

function getLocalIpAddress() {
  const interfaces = os.networkInterfaces();
  for (const name of Object.keys(interfaces)) {
    for (const interface of interfaces[name]) {
      const {address, family, internal} = interface;
      if (family === 'IPv4' && !internal) {
        return address;
      }
    }
  }
  return '127.0.0.1'; // 返回默认的localhost地址,以防找不到合适的IPv4地址
}

module.exports = getLocalIpAddress;

三、在目标页面引入并运用

如在vue2项目的 webpack.dev.conf.js 文件顶部导入这个新函数

javascript 复制代码
const getLocalIpAddress = require('./getLocalIpAddress');

修改 compilationSuccessInfo.messages 部分来使用这个函数获取的 IP 地址

javascript 复制代码
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  compilationSuccessInfo: {
    messages: [
      `Your application is running here: http://localhost:${port}`,
      `Network URL: http://${getLocalIpAddress()}:${port}`, // 使用 getLocalIpAddress 函数获取 IP
    ],
  },
  onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
}))

这样终端加载成功以后从单局域网变成可以获取本地ip的

相关推荐
进击的尘埃2 分钟前
拖拽搭建场景下的智能布局算法:栅格吸附、参考线与响应式出码
javascript
小猪努力学前端7 分钟前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
wuhen_n20 分钟前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n22 分钟前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山34 分钟前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
swipe1 小时前
深入理解 JavaScript 中的 this 绑定机制:从原理到实战
前端·javascript·面试
兆子龙1 小时前
前端哨兵模式(Sentinel Pattern):优雅实现无限滚动加载
前端·javascript·算法
豆苗学前端2 小时前
彻底讲透浏览器渲染原理,吊打面试官
前端·javascript·面试
进击的尘埃2 小时前
可视化搭建引擎的撤销重做系统:Command 模式 + Immutable 快照实现操作历史树
javascript
Hilaku4 小时前
在 HTTP/3 普及的 2026 年,那些基于 Webpack 的性能优化经验,有一半该扔了
前端·javascript·面试