uniapp区分 h5和小程序环境配置

ivy123456_

已于 2024-07-22 11:49:31 修改

阅读量169

点赞数 4

文章标签： uni-app 小程序 vue.js

于 2024-07-22 11:42:55 首次发布

本文链接：https://blog.csdn.net/wenwen123456_/article/details/140605456

版权

当我们在做小程序的时候，嵌入的有H5页面，并且H5页面请求接口域名地址和小程序域名地址不一致时，可以参考

config.js文件

const devConfig = {
	url: 'https://.............', //开发地址 
};
const prodConfig = {
	url: 'https://.............', //测试地址
};
const devConfigH5 = {
	url: 'https://.............', //开发地址H5
};
const prodConfigH5 = {
	url: 'https://.............', //测试地址H5
}

const config = {
	development: devConfig,
	production: prodConfig,
};
const VUE_APP = {
	API: process.env.NODE_ENV === 'development' ? config.development.url : config.production.url,
	H5API: process.env.NODE_ENV === 'development' ? devConfigH5.url : prodConfigH5.url,
};
export default VUE_APP;

request.js文件

//引入文件
import VUE_APP form "@/common/config.js" 
//小程序环境变量
const VUE_APP_API = VUE_APP.API
//H5环境变量
const H5_VUE_APP_API = VUE_APP.H5API
//window 只有在浏览器中存在 所以window.location.host可以获取当前域名
let TYPEAPP = window ? window.location.host == "h5页面域名........" : false
//定义一个变量 在下面接口封装的时候使用
let API_URL = TYPEAPP ? H5_VUE_APP_API : VUE_APP_API

//接口封装
............