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

5,761 阅读2分钟

在开发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属性达到切换的效果,其中有两处需要修改:

image.png

image.png

新增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