uniapp开发小程序工程配置环境变量&切换不同appId

在开发vue项目时，如果需要根据不同环境做不同参数修改时，一般都会通过配置环境变量来实现。例如配置请求测试跟正式请求地址。uniapp基于vue框架，环境变量配置也跟vue项目一致，步骤如下：

新建env文件

在根目录下新建两个文件：.env.prod和.env.test,分别对应正式环境跟测试环境，当然你可以根据自己的需求添加env文件，如本地开发调试可以新增.env.dev

示例文件内容：

.env.prod

VUE_APP_MODE=build
VUE_APP_ID=aaaaa
VUE_APP_BASE=https://build...

.env.test

VUE_APP_MODE=test
VUE_APP_ID=bbbbb
VUE_APP_BASE=https://test...

注意的是，常量名要以VUE开头命名

修改package.json文件

接着我们修改package.json文件中的script脚本，在命令的后面加上--mode [env文件名]，如：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode test"

这个对应着读取.env.test的内容

代码中访问

通过process.env访问，如在请求配置中，可以这么写：

baseUrl = process.env.VUE_APP_BASE

配置切换不同appid

如果你的项目有遇到同一套代码，上架多个小程序的需求，这时候就要切换appid。除了手动修改，有什么更好的办法优雅实现呢？

文档其实已经给了我们答案，点这里。

在uniapp的项目代码中，是通过修改manifest.json文件里面的appid属性达到切换的效果，其中有两处需要修改：

新增vue.config.js文件

在根目录下新增vue.config.js文件,代码如下(参考自文档)：

// 读取 manifest.json ，修改后重新写入
const fs = require('fs')

const manifestPath = './src/manifest.json'
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
function replaceManifest(path, value) {
  const arr = path.split('.')
  const len = arr.length
  const lastItem = arr[len - 1]

  let i = 0
  let ManifestArr = Manifest.split(/\n/)

  for (let index = 0; index < ManifestArr.length; index++) {
    const item = ManifestArr[index]
    if (new RegExp(`"${arr[i]}"`).test(item)) ++i
    if (i === len) {
      const hasComma = /,/.test(item)
      ManifestArr[index] = item.replace(
        new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
        `"${lastItem}": ${value}${hasComma ? ',' : ''}`
      )
      break
    }
  }

  Manifest = ManifestArr.join('\n')
}
// 读取环境变量内容
replaceManifest('appid', `"${process.env.VUE_APP_ID}"`)
replaceManifest('mp-weixin.appid', `"${process.env.VUE_APP_ID}"`)

fs.writeFileSync(manifestPath, Manifest, {
  flag: 'w'
})

修改package.json文件命令

    "dev:[小程序a]": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode test",
    "dev:[小程序b]": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode prod",
    "build:[小程序a]": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --mode test",
    "build:[小程序b]": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --mode prod"

以上四条命令分别代表

• 小程序a开发模式下的测试环境
• 小程序b开发下的正式环境
• 小程序a打包模式下的测试环境
• 小程序b打包模式下的正式环境

end