uniapp中,在config.js中设置后台访问地址，如何使其变为配置项，并在app任意一个页面中input就可以直接设置？

最近在做一个uniapp项目的过程中，遇到一个需求，甲方要求:在某一个设置页面可以设置uniapp的后台访问地址，发现网上基本上没有什么详细的案例或者博客，在这里分享一下具体实现方法：

1 将后台访问地址作为配置项存储在全局变量中，

在 config.js 文件中定义全局变量，用于存储后台访问地址：

// config.js
export default {
  apiUrl: 'http://example.com/api' // 默认的后台访问地址
};

2   在 App.vue 文件中引入 config.js 并将其挂载到全局变量中：

// App.vue
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import config from './config.js';

export default {
  data() {
    return {
      apiUrl: config.apiUrl
    };
  },
  watch: {
    apiUrl(newUrl) {
      config.apiUrl = newUrl;
    }
  }
};
</script>

在 App.vue 文件中将 config.js 中的全局变量 apiUrl 挂载到 data 中，并使用 watch 监听 apiUrl 的变化，并将新的值赋给 config.js 中的全局变量 apiUrl。

3页面中   提交更改

// AnyPage.vue
<template>
  <div>
    <input v-model="apiUrl" placeholder="请输入后台访问地址" />
  </div>
</template>

<script>
import config from './config.js';

export default {
  data() {
    return {
      apiUrl: config.apiUrl
    };
  },
  watch: {
    apiUrl(newUrl) {
      config.apiUrl = newUrl;
    }
  }
};
</script>

在任意一个页面中，我们可以使用 input 组件来绑定 apiUrl 变量。当用户在输入框中修改后台访问地址时，apiUrl 的值会自动更新。同时，我们使用 watch 监听 apiUrl 的变化，并将新的值赋给 config.js 中的全局变量 apiUrl。

通过以上步骤，可以在 UniApp 中将后台访问地址作为配置项，在任意一个页面中使用 input 组件来设置该配置项的值。