在实际开发中判断运行环境,通常用于调用不同环境的服务端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
进行接口拼接