在项目中运用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的

相关推荐
To_OC10 小时前
LC 200 岛屿数量:经典 DFS 入门题,我第一次写居然连方向都搞错了
javascript·算法·leetcode
labixiong12 小时前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试
weedsfly16 小时前
还在用 Axios?你可能需要重新理解 XHR 与 Fetch
前端·javascript·面试
CoderWeen16 小时前
从零实现一个 Vue3 流程图编辑器:节点拖拽、贝塞尔连线与框选
前端·javascript
To_OC1 天前
LC 128 最长连续序列:别上来就排序,O (n) 解法才是这题的灵魂
javascript·算法·leetcode
kyriewen1 天前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
Asize1 天前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙1 天前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
前端Hardy1 天前
又一个 AI 神器火了!
前端·javascript·后端
PBitW1 天前
GPT训练我的第二天,我表示不过如此!!!😕😕😕
前端·javascript·面试