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>

发表评论

邮箱地址不会被公开。 必填项已用*标注