vue 项目使用 webpack 构建自动获取电脑ip地址

时间：2024-01-19 18:48:26

1、开发 H5 时移动端，经常会使用真机进行调试本地环境、webpack 配置服务器好多脚手架写的都是固定的，而在团队开发中需要每人配置自己的本机 ip 进行开发，每次开启开发环境的都需要修改，并且还不能提到 git ，太麻烦了，所以找了方法，动态获取本机 ip 进行本地环境真机调试。
2、如果有其他人想看一下项目，难道每次都要打包发布一下才可以看到吗？将 localhost 改成电脑 ip 地址，在同一局域网下就可以看到你本地的项目，并不需要打包发布。

解决方案：

  1. windows 系统打开终端输入 ipconfig 可以查看电脑的IP地址；
  2. mac 系统打开终端输入 ifconfig 可以查看电脑 ip；

但是每天 ip 发生变化这样就很麻烦，每天都需要重新获取，并且不能提交到 git，所以提供以下解决方案来获取电脑 ip，使用 node 里的 os 模块；
在 config 文件里的 index.js 里面加上以下代码：

const os = require('os');

function getNetworkIp() {

    let needHost = ''; // 打开的host

    try {

        // 获得网络接口列表

        let network = os.networkInterfaces();

        for (let dev in network) {

            let iface = network[dev];

            for (let i = 0; i < iface.length; i++) {

                let alias = iface[i];

                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {

                    needHost = alias.address;

                }

            }

        }

    } catch (e) {

        needHost = 'localhost';

    }

    return needHost;

}

然后将 dev 里的 host 改成 getNetworkIp() 即可，代码如下：

dev: {

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: proxy,

    host: getNetworkIp(),

    port: 9528,

    autoOpenBrowser: true,

    errorOverlay: true,

    notifyOnErrors: false,

    poll: false,

    useEslint: true,

    showEslintErrorsInOverlay: false,

    devtool: 'source-map',

    cssSourceMap: false

}

其他用法：
os.EOL
定义操作系统一行结束的标识的常量。

os.arch()
返回操作系统 CPU 架构，可能的值有 “x64”、“arm” 和 “ia32”。

os.cpus()
返回一个数组对象，包括CPU的型号、速度、时间等。

os.endianness()
返回 CPU 的字节序，可能的是 “BE” 或 “LE”。
Little endian：将低序字节存储在起始地址。
Big endian：将高序字节存储在起始地址。

os.freemem()
返回操作系统空闲内存，单位是字节。

os.homedir()
返回当前用户的主目录。

os.hostname()
返回操作系统的主机名。

os.loadavg()
返回一个包含 1、5、15 分钟平均负载的数组。

os.platform()
返回操作系统平台。

os.release()
返回操作系统的发行版本。

os.tmpdir()
返回操作系统默认的临时文件目录。

os.totalmem()
返回系统内存总量，单位为字节。

os.type()
返回操作系统名称。

os.uptime()
返回操作系统运行的时间，以秒为单位。

相关文章