vue 项目打包的过程中通过命令行修改 api 接口前缀

环境：vue 全家桶、nodeJs、chrome浏览器

需求：后端需要将 npm run build 之后的文件部署到不同的服务器上去，后端希望在 npm run build 命令的后面直接加上 api = https://192.168.166.156:8444 (举个例子) ，在命令行执行之后整个页面的 api 接口前缀就会改为https://192.168.166.156:8444

实现原理：

1. 在 webpack.prod.conf.js 中使用( webpack plugin ) GenerateAssetPlugin 插件在打包的时候输出可配置文件 serverConfig.json

// build 之后更改接口地址
//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require("generate-asset-webpack-plugin");
var createServerConfig = function(compilation) {
  let cfgJson = { ApiUrl: process.argv[2] };
  return JSON.stringify(cfgJson);
};

// 放在 plugins 配置项下
// 打包的时候输出文件配置
    new GenerateAssetPlugin({
      filename: "serverConfig.json",
      fn: (compilation, cb) => {
        cb(null, createServerConfig(compilation));
      },
      extraFiles: []
    })

2. 在 Login.vue/main.js 里使用 axios 请求该配置文件中的 ApiUrl 参数并存储在 localStorage 

getHosts: function() {
      let _self = this;
      this.$ajax
        .get("serverConfig.json")
        .then(result => {
          // localStorage 分别存储 host、ip、port (业务需要)
          let ip = result.data.ApiUrl.split(":")[1].split("/")[2]; // 192.168.166.156
          let host = result.data.ApiUrl.split(":")[0]; // 8444 点击打开链接
          let port = result.data.ApiUrl.split(":")[2]; // https
          _self.$store.set(  // $store 为全局注册的 store 插件，管理 localStorage
            "presetIP",
            ip
          );
          _self.$store.set("presetHost", host);
          _self.$store.set("presetPort", port);
          _self.setHistoryIP();
        })
        .catch(error => {
          console.log(error);
        });
    }

3. 在 api 接口配置 js 中取出存储在 localStorage 中的 host、ip、port 字段组合成接口前缀

 

注意：在本地测试是否能跑通需要使用 nodeJs 的 http-server 插件开启本地服务器

或者浏览 vue 项目打包通过命令修改 vue-router 模式，修改 API 接口前缀 查看另一种方式