vue 项目使用 webpack 构建自动获取电脑ip地址
1、开发 H5 时移动端,经常会使用真机进行调试本地环境、webpack 配置服务器好多脚手架写的都是固定的,而在团队开发中需要每人配置自己的本机 ip 进行开发,每次开启开发环境的都需要修改,并且还不能提到 git ,太麻烦了,所以找了方法,动态获取本机 ip 进行本地环境真机调试。
2、如果有其他人想看一下项目,难道每次都要打包发布一下才可以看到吗?将 localhost 改成电脑 ip 地址,在同一局域网下就可以看到你本地的项目,并不需要打包发布。
解决方案:
- windows 系统打开终端输入 ipconfig 可以查看电脑的IP地址;
- 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()
返回操作系统运行的时间,以秒为单位。
vue 项目使用 webpack 构建自动获取电脑ip地址的更多相关文章
- Linux:自动获取静态IP地址,清空iptable,修改selinux脚本
自动获取静态IP地址,清空iptable,修改selinux脚本 环境:VMware 平台:centos6.8全新 功能: 1)应用ifconfig -a,route -n,cat /etc/reso ...
- 通过AWS的DHCP自动获取的IP地址是否会发生改变?
针对您的问题,分析如下:1.在一个VPC内,通过AWS的DHCP自动获取的IP地址,在如何情况下会发生改变?例如我把vpc的内所有100个ec2实例全部关闭,再全部重新打开,是否会发生IP地址变化的情 ...
- vue项目使用webpack构建的本地服务环境,在手机上访问调试
使用vue脚手架构建的项目,一般在本地localhost运行,配合浏览器的模拟调试工具开发. 如果想看真机环境,又不想build到线上. webpack能配置电脑本地内网环境指向公网访问的! 1.打开 ...
- 在Thinkphp3.2.3框架下实现自动获取客户端IP地址的get_client_ip()函数
在Thinkphp框架下使用get_client_ip()函数获取客户端IP地址十分方便: 一行代码便可以实现:$ip = get_client_ip(); 但当我们测试时会遇到后台获取的IP地址显示 ...
- 获取电脑 ip 地址 及系统
public static void main(String[] args) throws UnknownHostException { //获取电脑系统 结果:os.name:Windows 10 ...
- python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客
python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客 undefined Python多线程抓取代理服务器 | Linux运维笔记 undefined java如 ...
- Python 之自动获取公网IP
Python 之自动获取公网IP 2017年9月30日 文档下载:https://wenku.baidu.com/view/ff40aef7f021dd36a32d7375a417866fb84ac0 ...
- Java获取电脑IP、MAC、各种版本
Java代码获取电脑IP.MAC.各种版本 package com.rapoo.middle.action; import java.io.BufferedReader; import java.io ...
- 解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题
解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题 该问题是操作系统权限问题,需要将程序设置为以管理员模式运行和以windows7兼容 ...
随机推荐
- 自然语言处理之LDA主题模型
1.LDA概述 在机器学习领域,LDA是两个常用模型的简称:线性判别分析(Linear Discriminant Analysis)和 隐含狄利克雷分布(Latent Dirichlet Alloca ...
- Request Body可以反复读取的方法
org.springframework.web.filter.HiddenHttpMethodFilter:过滤器已经读取流了,因此想频繁读取流的话,自定义Filter必须在org.springfra ...
- 【转】VMware 14 Pro安装mac os 10.12
一.准备工作 [1]资源下载 VMware Workstation Pro 14 已安装或自行安装 Unlocker (链接: https://pan.baidu.com/s/1dG5jkuH 密码: ...
- 【window】git安装教程
相关链接:https://blog.csdn.net/nly19900820/article/details/73379854 作者:smile.轉角 QQ:493177502
- springmvc中messageConverter用法
解决StringHttpMessageConverter乱码问题问题: 当我们将字符串对象通过springmvc传回浏览器时,因为StringHttpMessageConverter消息转换器中默认的 ...
- 深入剖析kafka架构内部原理
1 概述 Kakfa起初是由LinkedIn公司开发的一个分布式的消息系统,后成为Apache的一部分,它使用Scala编写,以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cl ...
- Linux—日志查看(测试人员)
备注:在筛选语句后面加“--col”可以高亮显示查询结果中的关键字 cd /home/admin/logs/服务器名 #进入日志目录(错误日志文件:common-error.log),路径因公司而定 ...
- object detection[YOLO]
这部分,我们来聊聊YOLO. YOLO:You Only Look Once,顾名思义,就是希望网络在训练过程中,一张图片只要看一次就行,不需要去多次观察,比如滑框啥的,从而从底层原理上就减少了很多的 ...
- Insider Dev Tour(2018.06.28)
时间:2018.06.28地点:北京金茂万丽酒店
- 基于webpack+react+antd 项目构建
工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...