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兼容 ...
随机推荐
- Grid布局指南
简介 CSS网格布局(又称“网格”),是一种二维网格布局系统.CSS在处理网页布局方面一直做的不是很好.一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和in ...
- [Python] Python 100例
题目1:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #程序源 ...
- P1705 爱与愁过火(背包)
本来是个搜索题,但是自觉的成了背包! 多重用正序,01用逆序. 抽象出来一下,一个物体的体积为ai, 每次装入背包需要bi(在题目中为菜数量)分钟(这个题目只是bi为 1 而已)问在r分钟内,装比n大 ...
- PHP消息队列的实现方式与详解,值得一看
队列原理: 也是解耦的原理:业务系统和队列处理系统没有关系 一个写(业务系统),一个读(队列管理系统). 写的只管往队列里写,别的不用操心,读的能不能读完和写的也没有关系 同样,读的只管从队列里往外读 ...
- EL表达式运算符使用
EL表达式关系运算符的使用 == eq 等于 != ne 不等于 > gt 大于 < lt 小于 >= ge 大于等于 <= le 小于等于 举例说明 > 或者 gt, ...
- 【vue】饿了么项目的相关笔记链接
http://www.mtons.com/content/1819.htm http://www.tuicool.com/articles/F7BnaiY https://segmentfault.c ...
- ESP8266 HTTP 项目(2)HTTP网页修改WIFI连接,上电自动连接上次的WIFI。
网页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- 工具篇-Json处理
1. @JsonProperty和@SerializedName注解 使用场景 将一个json格式的字符串转换成某个java对象,或者将一个java对象转换成json格式的字符串时,如果json字符串 ...
- jquery append()与html()注意项
项目中,涉及到有一部分js代码是从数据库中读取出来动态加载到一个<script>标签中的情况.使用到了jquery的append()和html()两个函数. 应用场景如下: 页面端,有一个 ...
- 安卓权限申请处理框架Android-UsesPermission
安卓权限申请封装处理框架.测试支持4.0+.项目源于正式处理Android权限问题时,没找到简单.能满足被拒绝权限自动会到系统设置处理的框架,按自己的编程习惯造一个熟悉的轮子还是蛮好的.第一次使用An ...