uni-app中配置devServer实现跨域访问数据

1.在devServer中:

在manifest.json->源码视图中添加

注意:以下代码可以跨域,但是请求出来的数据不是想要的,会出现请求得到的不是数据,而是得到https://api.ithome.com网址的报错网页代码

“h5”: {  
        “devServer”: {  
            “port”: 8000,  
            “disableHostCheck”: true,  
            “proxy”: {  
                “/api”: {  
                    “target”: “https://api.ithome.com”,  
                    “changeOrigin”: true,  
                    “ws”: true,  
                    “secure”: false,
                }  
            }  
        }  
    },

用以下代码可以正确的请求到数据:

“h5”: {
        “devServer”: {  
            “port”: 8000,  
            “disableHostCheck”: true,  
            “proxy”: {  
                “/api”: {  
                    “target”: “https://api.ithome.com”,  //请求的目标域名
                    “changeOrigin”: true,   
                    “secure”: false,
                    “pathRewrite”: {  
                        “^/api”: “/”  
                    } 
 
                }  
            }  
        }  
    }

2.在.vue页面中添加

                var ajaxData={
                    url: “/api“+”/api/reply”,//接口地址即要跨域访问的目标地址
                    method: “get”,//请求的方法
                    data:{postid:236076,replyidlessthan:3241294},//请求所带的参数,即地址中?后部分
                    dataType:’json’,//数据类型
                    header:{
                      ’content-type’:’application/x-www-form-urlencoded’
                    },
                    success:function(res){
                            console.log(res.data)//成功后调用的函数
                        }
                  }
                  ajaxData = ajaxData;
                  uni.request(ajaxData)

完整的请求地址如下:

https://blog.csdn.net/qq_35500778/article/details/100161813

uni-app 配置不同的编译环境(本地、测试、生产)

最近开发项目发现uni-app不能像vue.config.js那样配置环境。自动识别的室友两种环境。
·在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
·cli模式下,是通行的编译环境处理方式。
根据官网提供demo,如下:

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

如果没有其他情况,在mian.js或者创建一个config.js然后导入main.js 这样的配置就ok啦

如果将代码打包到测试环境时会默认为pro环境。想要它访问测试环境的配置,此时就需要配置下拉 。 直接上的代码
创建config.js文件

let configURL = {}
const NODE_ENV = 'prod'; // dev:开发环境 | test:测试环境  prod:生产环境 
const DEV_URL = 'https://dev.dcloud.net.cn'; // 开发环境
const TEST_URL = 'https://dev.dcloud.net.cn'; // 开发环境
const PROD_URL = 'https://dev.dcloud.net.cn'; // 开发环境
const H5_URL = '/api'; // 开发环境
// if(process.env.NODE_ENV === 'development'){
//     console.log('开发环境')
// }else{
//     console.log('生产环境')
// }
if (NODE_ENV === 'dev') {
	console.log('开发环境')
	configURL = {
		BaseURL: DEV_URL
	}
} else if(NODE_ENV === 'test'){
	console.log('测试环境')
	configURL = {
		BaseURL: TEST_URL
	}
}else {
	console.log('生产环境')
	configURL = {
		BaseURL: PROD_URL
	}
}
// APP-PLUS	App
// APP-PLUS-NVUE或APP-NVUE	App nvue
// H5	H5
// MP-WEIXIN	微信小程序
// MP-ALIPAY	支付宝小程序
// MP-BAIDU	百度小程序
// MP-TOUTIAO	字节跳动小程序
// MP-QQ	QQ小程序
// MP-360	360小程序
// MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
// QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
// QUICKAPP-WEBVIEW-UNION	快应用联盟
// QUICKAPP-WEBVIEW-HUAWEI	快应用华为
// #ifdef H5
	configURL = {
		BaseURL: H5_URL
	}
// #endif

export default configURL

index.vue

<script>
	import configURL from '@/config.js';
	export default {
		data() {
			return {
				news:[],
				item:{}
			}
		},
		onLoad() {
			console.log(configURL.BaseURL);
			uni.request({
				url: configURL.BaseURL + '/api/news',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.news = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
		},
	}
</script>