Vue.js中如何从外部JSON文件动态读取IP地址到变量

• 第一步：把data.json放到静态资源目录，避免被打包
  不管你用Vue、React还是其他框架，都有专门的静态资源目录（比如Vue CLI/Create React App/Vite的public文件夹）。直接把data.json放在这个目录下，打包工具会自动将它复制到dist根目录，不会对文件进行编译或打包，这样你就能随时修改dist里的data.json内容。

  建议把你的data.json格式改成对象（更易读取）：

  {
    "FRONTEND_IP": "192.168.1.35",
    "BACKEND_IP": "192.168.1.123"
  }
  

  如果坚持用原来的数组格式也可以，后续读取时做对应转换即可。

• 第二步：运行时异步加载配置文件，不要用import
  删除原来的import data from './data.json'写法，换成在应用初始化时用fetch（或axios）异步加载这个文件：

  通用JS示例：

  // 全局存储配置
  window.APP_CONFIG = {};
  
  // 应用启动前加载配置
  async function loadAppConfig() {
    try {
      const response = await fetch('/data.json');
      const config = await response.json();
      // 如果用原数组格式，转成对象：
      // window.APP_CONFIG = config.reduce((obj, item) => ({...obj, ...item}), {});
      window.APP_CONFIG = config;
    } catch (error) {
      console.error('配置加载失败，使用默认IP');
      // 设置默认值避免应用异常
      window.APP_CONFIG = {
        BACKEND_IP: '127.0.0.1',
        FRONTEND_IP: '127.0.0.1'
      };
    }
  }
  
  // 加载完配置再启动应用
  loadAppConfig().then(() => {
    // 这里初始化你的应用，比如Vue的new Vue()或React的ReactDOM.render()
  });
  

  Vue项目示例（main.js中）：

  import { createApp } from 'vue';
  import App from './App.vue';
  
  let app;
  
  async function loadConfig() {
    try {
      const res = await fetch('/data.json');
      const config = await res.json();
      app.config.globalProperties.$APP_CONFIG = config;
    } catch (err) {
      app.config.globalProperties.$APP_CONFIG = {
        BACKEND_IP: '127.0.0.1',
        FRONTEND_IP: '127.0.0.1'
      };
    }
    app.mount('#app');
  }
  
  app = createApp(App);
  loadConfig();
  

• 第三步：在API请求中使用动态IP
  把原来硬编码的IP换成加载到的配置值，比如：

  // 通用示例
  const backendBaseUrl = `http://${window.APP_CONFIG.BACKEND_IP}:你的后端端口`;
  axios.get(`${backendBaseUrl}/api/data`);
  
  // Vue组件内示例
  this.$axios.get(`http://${this.$APP_CONFIG.BACKEND_IP}:你的后端端口/api/data`);
  

• 验证方法
  打包生成dist后，修改dist/data.json里的BACKEND_IP，启动前端服务后，查看浏览器网络请求的地址是否已更新为修改后的IP，无需重新打包即可生效。

内容的提问来源于stack exchange，提问作者Anders S