uni-app使用process配置多环境

uni-app使用process配置多环境

---

---

前言

这里主要是记录开发过程中，因uni-app只支持开发环境和生产环境的接口URL打包，所以每次发布测试环境都需要修改一下api地址，所以为了减少错误，特意研究了一下怎么配置多环境。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、个人需求

需要根据打包命令配置不同的api地址。

二、使用步骤

1.基本使用

代码如下（示例）：

let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
    console.log('开发环境')
    baseUrl = ''
} else {
    // 测试和生产环境
    console.log('测试和生产环境')
    baseUrl = ''
}

这里是uni-app提供的主要是在http请求之前，对不同打包命令进行了api地址赋值。但现在只支持开发环境，测试环境和生产环境是同一个地址，所以我们需要区分多环境。

2.解决思路

因pc端是在package.json里面根据不同的打包命令进行区分测试，生产，还是仿生产环境，所以根据这个思路。我们是不是也可以。就有了如下代码

原打包命令

我这里只说明一种，其他的也同理。在package.json中

 "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",

根据原有的命令进行修改

"build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",

问题又来了，这里只区分了打包命令，但是对应的代码执行还是执行生产的。所以对这两个都进行了如下修改。

 "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 ENV_CONFIG=production vue-cli-service uni-build",
 "build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 ENV_CONFIG=test vue-cli-service uni-build",

新增了一个ENV_CONFIG参数进行区分http请求该用哪个环境的api。但理想很美好，现实很骨感。当我这样进行打包后，发现用process.env.ENV_CONFIG 为undefined

---

3.问题解决

整体思路个人感觉是没问题的，所以查看了uni-app的文档
发现只能已上图所示的来开头，才能嵌入到代码中，所以后面对打包请求进行了修改。

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 VUE_APP_ENV_CONFIG=production vue-cli-service uni-build",
"build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 VUE_APP_ENV_CONFIG=test vue-cli-service uni-build",

这样就可以根据不同的打包命令，来区分不同的api地址了。目前只希望api地址根据命令来改变，其他保持原有的。
使用process.env.VUE_APP_ENV_CONFIG来获取测试还是生产

总结

APP开发细节跟pc端还是有些差异的，但是大体流程还是一样的。所以有问题还是要多看官方文档。现附上该问题对应的URL 。

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F