前端开发大多数人会mock数据,且公司内一般都会有一套自成体系的mock数据的方法,今天就来讲一讲结合mock,前端需要做的一些配置(当然都是为了省时省事)
首先
使用mcok会自动起一个node服务,此时所有的接口及数据都会成列表展示,见下图:
当我们在移动端调试的时候,我们都知道,需要用到IP去进行访问,但是此时IP有可能是动态的,我们又不想每次都去修改这个IP,那么重点来了。。。
我们先去获取到本机IP,直接上代码
// 获取本机电脑IP
function getIPAdress() {
let interfaces = require('os').networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
let alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
// console.log(alias.address);
return alias.address
}
}
}
}
其次
我们获取到IP后,需要在页面js中使用,此时我们需要找一个变量去承接它,那就自然而然的想到webpack.DefinePlugin 代码如下:
new webpack.DefinePlugin({
'process.env': {
SERVERIP:JSON.stringify({"serverIp":serverIp}) //将本地电脑IP用变量存起来,便于在本地测试时使用
}
})
最后
我们就可以直接在页面js中使用了
const httpIP = process.env.SERVERIP.serverIp;
const httpURL =`http://${httpIP}:3020`;
参考链接: