將本地網絡地址 動態寫入Vue項目的process.env

 首先我們先利用 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自定義webpack vue.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配置文件還貼心的把需要自定義修改插件時，插件的名字告訴我們了。

 

 　　最后我們來編寫代碼實現，我們的需求。

// 這里主要配置開發環境的端口號，避免重復
// ref    https://cli.vuejs.org/zh/config/#vue-config-js

// 獲取當前的網絡地址
const os = require("os");
var ifaces = os.networkInterfaces();
let networkAddress = ifaces["en0"].filter(item => item.family === "IPv4")[0].address;
const PORT = 2233;
const SERVE_PATH = `"http://${networkAddress}:${PORT}"`;

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了。