vue 的 npm run dev 自动打开浏览器姿势(自动获取本地的ip地址)

前言

比这开发时,用了vue-cli,运行npm run dev命令行时会自动打开浏览器,并且默认的是打开http:// localhost:端口/,当我想用手机设备去访问时,访问地址得是http:// IP地址:端口的形式,然而我们的ip是每次都会变化的,这样导致每次都需要操作 ipconfig 获取本地ip再复制到手机页面观看,十分难受,因此把node自动打开浏览器的地址修改后就方便多了 ( 无论是复制还是二维码扫描观看…)。

Node.js OS 模块

node.js os 模块可见 http://www.runoob.com/nodejs/nodejs-os-module.html
我们就需要引入os模块获取本地ip地址,替换静态的localhost。
config/index.js 配置里分别加上这两段代码(修改):

const os = require('os')
var needHost= '' // 打开的host
try {
  let network = os.networkInterfaces() // 获得网络接口列表。
  needHost = network[Object.keys(network)[0]][1].address // 本机ip
} catch (e) {
  needHost= 'localhost'
}

module.exports = {
  dev: {
    host: needHost, // 我们上面设置的needHost
    port: 8080, // 端口号
    autoOpenBrowser: true, // 自动打开在浏览器上
    errorOverlay: true,
    notifyOnErrors: true,

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',
  },
}

npm address包直接获取本地ip地址

$ npm i address -D

然后打开配置 config/index.js

var address = require('address')
var needHost = address .ip() || 'localhost' // 需要更改的ip

其他同上

手机访问页面问题

在服务器环境下通过IP访问

  • 首先搭建一个服务器环境或者下载现成的程序集成包(比如phpstudy、jspstudy等)。

  • 确保服务器和手机连接在 同一网段 。如果是笔记本的话,手机和笔记本直接连接在 同一wifi 下,如果是台式机,则需要插入无线网卡或者其他的无线措施确保两个在 同一网段下

  • 最后通过本机 IP + 端口 访问需要测试的项目。

Logo

前往低代码交流专区

更多推荐