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()
返回操作系统运行的时间,以秒为单位。

Logo

前往低代码交流专区

更多推荐