使用uniapp重构原生微信小程序-baseUrl随环境切换繁琐的发布流程小程序每次发布流程要经过一个非常繁琐的步骤：

繁琐的发布流程

小程序每次发布流程要经过一个非常繁琐的步骤：

修改请求地址为测试环境地址
打包小程序并上传
登录微信小程序开放平台设置版本为体验版
测试/验收通过后
修改请求地址为正式环境地址
打包小程序并上传
登录微信小程序开放平台提交审核

发布的时候要专门人工修改请求地址这个步骤，如果开发人员忘记修改或者修改错了，导致正式发布访问的测试环境问题是非常严重的。并不是说研发人员细心不细心的问题。而是只要有出错的可能，那么错误一定会发生。

原生微信小程序的请求的服务器地址的实现方式如下，大家感受一下是否和你的祖传代码有异曲同工之处：

// utils/nev.js (nev？估计是某位程序员前辈是想命名为env的吧，代表环境配置。。。)
module.exports = {
    //老业务服务器地址
    dev:{
        baseUrl: https://prod.example.com  //正式环境
        //baseUrl: https://test.example.com  //测试环境
        //baseUrl: http://192.168.1.234  //张三开发机器
        //baseUrl: http://192.168.1.123  //李四开发机器
    },
    //新业务服务器地址
    dev1:{
        baseUrl: https://api.example.com //正式环境
        //baseUrl: https://test-api.example.com  //测试环境
        //baseUrl: http://192.168.1.234  //张三开发机器
        //baseUrl: http://192.168.1.123  //李四开发机器
    }
}

这个文件在其他文件中导入使用，如下：

//reque.js (reque? 我猜应该是request的意思。)
const {
  dev,
  dev2
} = require('./nev.js')

module.export = {
  someMethod(){
      //... 其他代码
      wx.request(`${dev.baseUrl}/...`)
      //....其他代码
  }
    
}

重构+改进

我们引入uniapp2wxpack这个插件后，打包小程序需要使用这个命令npm run build:mp-weixin-pack 。开发的时候使用npm run dev:mp-weixin-pack,这个还带有watch功能，实时编译。

打开package.json查看这两个script具体执行内容，我们能发现其实uniapp项目最后是调用的vue-cli-service。于是，顺藤摸瓜，找到了模式和环境变量具体的规则不再赘述，请参考官方文档学习。

在项目的根目录下创建如下三个文件：

//.env 

#体验版地址
VUE_APP_OLD_TRIAL_BASE_URL=https://test.example.com
VUE_APP_NEW_TRIAL_BASE_URL=https://test-api.example.com

//.env.development
#开发环境默认地址，会提交到代码仓库
VUE_APP_OLD_BASE_URL=https://test.example.com
VUE_APP_NEW_BASE_URL=https://api-test.example.com


//.env.development.local
#开发本地环境地址，开发人员可修改，可用于开发环境联调排查bug git不管理，不会提交到代码仓库
VUE_APP_OLD_BASE_URL=https://test.example.com
VUE_APP_NEW_BASE_URL=https://api-test.example.com

//.env.production
#生产环境地址
VUE_APP_OLD_BASE_URL=https://test.example.com
VUE_APP_NEW_BASE_URL=https://api-test.example.com

然后在uniapp项目的文件夹创建一个导入环境变量的文件：

//common/base-url.ts
let OLD_BASE_URL : string = process.env.VUE_APP_OLD_TRIAL_BASE_URL as string
let NEW_BASE_URL : string = process.env.VUE_APP_NEW_BASE_URL as string

//体验版小程序替换为配置的体验版地址
let version = uni.getAccountInfoSync().miniProgram.envVersion
if (version === 'trial') {
  OLD_BASE_URL = process.env.VUE_APP_OLD_TRIAL_BASE_URL as string
  NEW_BASE_URL = process.env.VUE_APP_NEW_BASE_URL as string
}

export interface IBaseUrl {
  oldBaseUrl : string;
  newBaseUrl : string
}

const baseUrl : IBaseUrl = {
  oldBaseUrl: OLD_BASE_URL,
  newBaseUrl: NEW_BASE_URL
}

export default baseUrl

这样通过不同命令打包小程序代码的时候，会将不同的地址打包到代码。