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

vue 项目使用 webpack 构建自动获取电脑ip地址的更多相关文章

  1. Linux:自动获取静态IP地址,清空iptable,修改selinux脚本

    自动获取静态IP地址,清空iptable,修改selinux脚本 环境:VMware 平台:centos6.8全新 功能: 1)应用ifconfig -a,route -n,cat /etc/reso ...

  2. 通过AWS的DHCP自动获取的IP地址是否会发生改变?

    针对您的问题,分析如下:1.在一个VPC内,通过AWS的DHCP自动获取的IP地址,在如何情况下会发生改变?例如我把vpc的内所有100个ec2实例全部关闭,再全部重新打开,是否会发生IP地址变化的情 ...

  3. vue项目使用webpack构建的本地服务环境,在手机上访问调试

    使用vue脚手架构建的项目,一般在本地localhost运行,配合浏览器的模拟调试工具开发. 如果想看真机环境,又不想build到线上. webpack能配置电脑本地内网环境指向公网访问的! 1.打开 ...

  4. 在Thinkphp3.2.3框架下实现自动获取客户端IP地址的get_client_ip()函数

    在Thinkphp框架下使用get_client_ip()函数获取客户端IP地址十分方便: 一行代码便可以实现:$ip = get_client_ip(); 但当我们测试时会遇到后台获取的IP地址显示 ...

  5. 获取电脑 ip 地址 及系统

    public static void main(String[] args) throws UnknownHostException { //获取电脑系统 结果:os.name:Windows 10 ...

  6. python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客

    python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客 undefined Python多线程抓取代理服务器 | Linux运维笔记 undefined java如 ...

  7. Python 之自动获取公网IP

    Python 之自动获取公网IP 2017年9月30日 文档下载:https://wenku.baidu.com/view/ff40aef7f021dd36a32d7375a417866fb84ac0 ...

  8. Java获取电脑IP、MAC、各种版本

    Java代码获取电脑IP.MAC.各种版本 package com.rapoo.middle.action; import java.io.BufferedReader; import java.io ...

  9. 解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题

    解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题 该问题是操作系统权限问题,需要将程序设置为以管理员模式运行和以windows7兼容 ...

随机推荐

  1. 设计模式のVisitorPattern(访问者模式)----行为模式

    一.产生背景 访问者模式是封装一些施加于某种数据结构之上的操作.一旦这些操作需要修改的话,接受这个操作的数据结构则可以保存不变.访问者模式适用于数据结构相对稳定的系统, 它把数据结构和作用于数据结构之 ...

  2. Spring Cloud构建微服务架构:服务网关(路由配置)【Dalston版】

    转载:http://blog.didispace.com/spring-cloud-starter-dalston-6-2/ 原创  2017-08-26  翟永超  Spring Cloud 被围观 ...

  3. Error response from daemon: --cluster-store and --cluster-advertise daemon configurations are incompatible with swarm mode

    将docker worker node加入swarm集群时,出现以下错误 1.试验环境: centos7 2.报错翻译:--cluster-store和--cluster-advertise后台配置与 ...

  4. UVA1471-Copying Books(二分答案)

    Problem UVA1471-Copying Books Accept: 2669  Submit: 22797Time Limit: 3000 mSec Problem Description B ...

  5. tomcat 安装配置部署到nginx+tomcat+https

    目录 1 Tomcat简介 2.下载并安装Tomcat服务 2.2 部署java环境 2.3 安装Tomcat 2.4 Tomcat目录介绍 (关注点 bin conf logs webapps) 2 ...

  6. Control4系统对接arduino

    https://www.chowmainsoft.com/arduino int digitalState[] = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}; v ...

  7. Boost 和 Boost.Build 的设置

    问题: 安装编译完 Boost 后,如果不设置 BOOST_ROOT 和 BOOST_BUILD_PATH 则可能导致使用 bjam 时定位到 Boost 默认的路径 /usr/share/boost ...

  8. 初学Python——进程

    什么是进程? 程序不能单独执行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的过程就叫做进程.进程是操作系统调度的最小单位. 程序和进程的区别在于:程序是储存在硬盘上指令的有序集合,是 ...

  9. AJAX请求返回HTTP 400 错误 - 请求无效 (Bad request)

    在ajax请求后台数据时有时会报HTTP400错误-请求无效(Badrequest);出现这个请求无效报错说明请求没有进入到后台服务里: 原因: 1)前端提交数据的字段名称或者是字段类型和后台的实体类 ...

  10. phpstorm 免费激活码

    打开网址 http://idea.lanyus.com/ 选择获取注册码,复制生成的验证码 安装完成后,打开软件,依次选择菜单栏 Help -> Register-> Activation ...