将本地网络地址 动态写入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了。