首先我們先利用 nodejs 動態的拿到本地網路地址。這裡使用的是os.networkInterfaces()，大家可以參考官網，或者自己寫個demo，在控制檯列印輸出一下。

const os = require("os");
var ifaces = os.networkInterfaces();
let networkAddress = ifaces["en0"][1]["address"];

到這裡我們已經拿到了本地的網路地址，那麼我們將其寫入Vue專案。

方法一：

　　關於Vue專案，我們可以在Vue專案的根目錄下面建立 .env 檔案，然後在裡面將我們的網路地址寫入，那麼在Vue專案裡面就能拿到了，不過需要我們指定 NODE_ENV （專案的執行環境）。

　　通常是使用 .env.development 來配置開發環境的靜態資源（NODE_ENV 為development ）

　　　　　　　.env.production來配置線上環境的靜態資源（NODE_ENV 為production ）。

　　但是我們需要在配置的靜態資源時加上 VUE_APP_ 字首。我們可以參考下官網的Vue環境變數。

　　其實我們可以在 .env 檔案裡面配置很多的靜態資源，不僅僅只是這裡討論的網路地址。實際開發大多是用來配置介面地址。

　　那麼現在我們可以寫入靜態資源，但是不能動態寫入。所以提供一個思路，我們可以在專案啟動前，利用nodejs的 fs 模組將以下的程式碼寫入到 .env 檔案中，那麼.env 檔案中就是我們想要的值了。但是這樣做會導致只要換了網路就會修改 .env 檔案。

　　.env.development 檔案示例

NODE_ENV = "development"
VUE_APP_BASE_URL = "http://www.baidu.com"

方法二：

　　前置知識：

　　1.全域性CLI全配置：vue.config.js

　　2.Vue自定義webpackvue.config.js配置webpack。

　　接下來就是我們的實際操作了，Vue專案啟動之前會先執行 vue.config.js ,拿到專案打包的配置，在進行專案的構建。因此我們可以在vue.config.js 中執行上面nodejs的方法 拿到動態網路地址。然後我們通過自定義webpack 將動態網路寫入到專案的 process.env 中。至於我們要修改哪一項的webpack配置，那麼就需要我們去檢視Vue打包專案的webpack配置。

　　這裡以Vue2.0為例子，先進入到Vue專案根目錄，然後開啟終端輸入 以下兩行程式碼就可以拿到開發環境和生產環境的打包配置了。

// mode 指定模式是 開發還是生產 ， 後面是輸出檔案的目錄
// 開發環境打包配置
vue inspect --mode=deveplment > webpack.dev.js
// 生產環境打包配置
vue inspect --mode=deveplment > webpack.dev.js

　　拿到打包配置之後，我們可以發現 process.env 是在 DefinePlugin 中配置的，那麼我們只需要自定義 define 這個外掛就好了。

　　Vue的webpack配置檔案還貼心的把需要自定義修改外掛時，外掛的名字告訴我們了。

　　最後我們來編寫程式碼實現，我們的需求。

// 獲取當前的網路地址
const os = require("os");
var ifaces = os.networkInterfaces();
let networkAddress = ifaces["en0"][1]["address"];
const SERVE_PATH = `"http://${networkAddress}"`;

module.exports = {
  devServer: {
    open: true,
    port: 8090,
    https: false,
    hotOnly: false
  },
  // 自定義Vue打包外掛的配置
  // 這裡主要目的是 把 SERVE_PATH 寫入到 process.env（可以修改 process.env）
  chainWebpack: config => {
    // args 是一個數組，返回值也必須是一個數組
    config.plugin("define").tap(args => {
      //   console.log("define", args);
      let newProcessEnv = { ...args[0]["process.env"], SERVE_PATH };
      return [{ "process.env": newProcessEnv }];
    });
  }
};

　　現在我們就可以在專案中去使用process.env中的 SERVE_PATH了。