背景

要在 webpack 打包的前端项目中获取到启动的服务 ip 地址

在webpack的config文件夹下添加获取ip工具方法文件ip.js

  1. const os = require('os');
  3. module.exports = () => {
  4.     let needHost = ''; // 打开的host
  5.     try {
  6.         // 获得网络接口列表
  7.         let network = os.networkInterfaces();
  8.         for (let dev in network) {
  9.             let iface = network[dev];
  10.             for (let i = 0; i < iface.length; i++) {
  11.                 let alias = iface[i];
  12.                 if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
  13.                     needHost = alias.address;
  14.                 }
  15.             }
  16.         }
  17.     } catch (e) {
  18.         needHost = 'localhost';
  19.     }
  20.     return needHost;
  21. }

注： os对象是node提供的操作系统对象，可以获取操作系统相关数据

将ip放入webpack导出的全局变量 process.env 中

注： 在 env.js 文件中添加

  1. const ip = require('./ip') // 添加部分 --- 头部引入文件
  3. ----------------------------------------------
  5. function getClientEnvironment(publicUrl) {
  6.   const raw = Object.keys(process.env)
  7.     .filter(key => REACT_APP.test(key))
  8.     .reduce(
  9.       (env, key) => {
  10.         env[key] = process.env[key]
  11.         return env
  12.       },
  13.       {
  14.         // Useful for determining whether we’re running in production mode.
  15.         // Most importantly, it switches React into the correct mode.
  16.         NODE_ENV: process.env.NODE_ENV || 'development',
  17.         // Useful for resolving the correct path to static assets in `public`.
  18.         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
  19.         // This should only be used as an escape hatch. Normally you would put
  20.         // images into the `src` and `import` them in code to get their paths.
  21.         PUBLIC_URL: publicUrl,
  22.         IP: ip() // 添加部分 --- 加入环境变量
  23.       }
  24.     )
  25.   // Stringify all values so we can feed into Webpack DefinePlugin
  26.   const stringified = {
  27.     'process.env': Object.keys(raw).reduce((env, key) => {
  28.       env[key] = JSON.stringify(raw[key])
  29.       return env
  30.     }, {})
  31.   }
  33.   return { raw, stringified }
  34. }

项目中使用

  1. console.log('IP',process.env.IP)