環境：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 介面字首 檢視另一種方式