node自动打开浏览器姿势(自动获取本地ip)

更新,滚动到文章最下方,查看最新的解决方法

前言

笔者开发时,使用了vue-cli,运行npm run dev命令行时会自动打开浏览器,一时好奇进入了解下,并且默认的是打开http:// localhost:端口/,当我想用手机设备去访问时,访问地址得是http:// IP地址:端口的形式,因此把node自动打开浏览器的地址修改后就方便多了(无论是复制粘贴还是啥的……)。

opn模块, 自动打开浏览器

首先,从package.json中找到dev对应的脚本,运行了build/dev-server.js文件。


node自动打开浏览器姿势(自动获取本地ip)_第1张图片

该文件使用了opn模块去打开浏览器

os模块,获取ip地址

找到了打开浏览器的代码后,我们就需要引入os模块获取本地ip地址,替换静态的localhost
在dev-server分别加上这两段代码(修改):

  var os = require('os')
  var lacalhost = ''
  try {
    var network = os.networkInterfaces()
    localhost = network[Object.keys(network)[0]][1].address
  } catch (e) {
    localhost = 'localhost';
  }
  var uri = 'http://' + localhost + ':' + port
node自动打开浏览器姿势(自动获取本地ip)_第2张图片
node自动打开浏览器姿势(自动获取本地ip)_第3张图片

完成

至此就大功告成了,当然只是在windows下用过,mac没有测试!
修改前:

Paste_Image.png

修改后:


更新(2017-12-26)

分割线上方的教程不需在看,可以使用一个npm包直接获取ip,address

$ npm i address -D

打开build/dev-server.js,引入address

...
var address = require('address')
...

然后在文件下方修改成以下代码即可


node自动打开浏览器姿势(自动获取本地ip)_第4张图片
image.png

你可能感兴趣的:(node自动打开浏览器姿势(自动获取本地ip))