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

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 + 埠 訪問需要測試的專案。