How to Stop Hardcoding Service Endpoints in Vue.js

[havietduc91]

Follow: http://www.bigendiandata.com/2020-01-13-Vue_for_S3/ https://dev.to/djdany01/how-to-use-dynamic-environment-variables-in-vuejs-4l3e main.js

const getRuntimeConfig = async () => {
  const runtimeConfig = await fetch('/runtimeConfig.json');
  return await runtimeConfig.json()
}

const importHttpConfigs = async () => {
  await import("./utils/http-configs");
}

getRuntimeConfig().then(function(json) {
  Object.keys(json).forEach(key => {
    console.log("Runtime config: " + key, json[key]);
    setValueToStorageByKey(key, json[key])
  });
  importHttpConfigs().default;
});

[havietduc91]

runtimeConfig.json

{
  "VUE_APP_AUTH_DOMAIN": "http://10.0.0.49:9999",
  "VUE_APP_DOMAIN": "http://10.0.0.49:9999",
  "VUE_APP_WORD_DOMAIN": "http://test1.freedownloadcrack.com",
  "VUE_APP_COMMON_DOMAIN": "http://10.0.0.49:8281",
  "VUE_APP_API_VERSION": "/api",
  "VUE_APP_SOCKET_URL": "http://10.0.0.49:6849/notification",
  "VUE_VERSION": "0.3.148"
}