uniapp中,在config.js中设置后台访问地址,如何使其变为配置项,并在app任意一个页面中input就可以直接设置?
在uni-app项目中,你可以在项目根目录下的manifest.json
文件中设置全局变量,然后在main.js
中引入并设置到Vue.prototype
上,这样在应用的任何页面都可以通过this
访问这些全局变量。
- 打开
manifest.json
文件。 - 在
manifest.json
的h5
节点下,或者根节点下(全局生效),添加你的后端地址配置:
{
// ... 其他配置
"global": {
"apiUrl": "https://your-backend-url.com/api/"
}
}
- 打开
main.js
文件,引入全局变量并设置到Vue.prototype
上,以便于全局访问:
// main.js
Vue.prototype.$apiUrl = manifest.global.apiUrl;
// 或者如果你不想在每个页面单独引入manifest.json,可以在main.js中直接设置
Vue.prototype.$apiUrl = "https://your-backend-url.com/api/";
- 在应用的任何页面或组件中,你可以通过
this.$apiUrl
来访问后端访问地址:
// 例如,在某个页面的methods中
methods: {
fetchData() {
const url = this.$apiUrl + 'some-endpoint';
// 使用url进行后续的网络请求操作
}
}
确保在使用这些全局变量之前,已经在main.js
中正确设置了它们。这样你就可以在config.js
中设置后端访问地址,并在应用的任何页面通过全局变量来使用它了。
评论已关闭