有时会有在局域网下通过 IP 地址访问 vue 项目的需求，记录下获取本机 IP 的方法。
安装依赖
获取 IP 需要借助 os 模块，我们需要先安装依赖：
npm install os
配置修改
需要修改项目配置文件 vue.config.js。
- 增加一个函数用于获取本机内网 IP。
const os = require('os');
function getNetworkIp() {
// 打开的 host
let needHost = '';
try {
// 获得网络接口列表
let network = os.networkInterfaces();
console.log(network);
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 = 'http://localhost';
}
return needHost;
}
chainWebpack函数中增加配置。
config.plugin('define').tap((args) => {
let ip = getNetworkIp();
args[0]['process.env'].BASE_IP = `"http://${ip}:${port}"`;
return args;
});
使用
启动项目之后就可以从 process.env 的相应变量中获取到本机 IP 了。
