vue的npm run dev自动打开浏览器姿势（自动获取本地ip）

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 + 端口 访问需要测试的项目。