首页 > 建站教程 > 前端框架 >  uni-app 判断运行环境的方法正文

uni-app 判断运行环境的方法

在实际开发中判断运行环境,通常用于调用不同环境的服务端API接口地址。在开发环境下需要调用测试接口,在生产环境下需要调用正式接口,这时需要判断当前的运行环境,从而调用不同的接口。

uni-app可通过process.env.NODE_ENV判断当前运行环境。

在HBuilderX中 ,选择“运行”命令编译出的是开发环境,选择“发行”命令编译出的是生产环境,代码示例如下:

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


在实际开发中不可能只有这两个环境,还需要多环境配置,如测试环境,预览环境等。其配置方式与Vue一样,也需要配置package.json文件。使用HBuilder X创建的项目时没有package.json文件的,这里需要用vue-cli命令行创建项目。项目创建后即可看到package.json文件,可以根据Vue多环境配置方案自行配置。


配置生产环境和开发环境的API接口

这里实现不同环境自动切换接口地址的功能。为了在开发项目中使用方便,这里将其封装到一个文件中。在static文件夹中创建js/conf/config.js文件中,该文件的代码如下:

let baseApi = process.env.NODE_ENV === 'development' : "htpp://dev.lucklnk.com":"http://www.lucklnk.com";
export default {
    baseApi:baseApi
}


config挂载到Vue原型属性$config

...
import config from "./static/js/conf/config";
Vue.prototype.$config = config;
...


在pages/index/index.vue文件中使用,代码如下:

...
onLoad(opts){
    console.log(this.$config.baseApi);
}
...


在开发项目获取服务端数据时就可以使用this.$config.baseApi进行接口拼接