cll创建的uniapp小程序动态更改manifest.json

1，前言

事情的起因是这样的，项目是用cli搭建的uni-app小程序。申请了两个appid，一个用作开发人员调试使用，体验版和正式版都是dev环境。一个体验版是测试环境或者beta环境，而正式版是线上环境。基于这种情况，我想了两个方案来动态配置。

• 1，用node动态更换appid，并且写4个环境env文件，配置不同的打包命令（结果uview这个库在打包test和beta环境时一直报错，短时间没找到原因）
• 2，还是用node动态更换appid，并且写4个环境env文件，配置不同的打包命令，但是多加了一个json文件，用node动态修改文件，在App.vue里导入。

2，实现思路

首先，小程序运行时，自带一个运行环境变量，值是一个字符串，如下表：

环境	值
开发版	develop
体验版	trial
正式版	release

根据这个值，我这边创建了env.dev.js，env.test.js，env.beta.js，env.pro.js，四个文件在根目录。里面写了四个环境对应的appid，和本地版请求地址，体验版接口请求地址，正式版请求地址。并且在src目录新增了requestPath.json文件和modifyManifest.js文件，具体用法如下。

3，实现代码

• env.dev.js

/*
  1，VUE_APP_WX_APPID字段是小程序的appid
  2，xxx_url字段是小程序各版本的请求域名
*/
module.exports = {
  PROGRAM_NAME: '小程序名字',
  VUE_APP_WX_APPID: '987654321',
  develop_url: 'dev-baidu.com', // 本地版
  trial_url: 'dev-baidu.com', // 体验版
  release_url: 'baidu.com' // 线上版
}

• env.prd.js

/*
  1，VUE_APP_WX_APPID字段是小程序的appid
  2，xxx_url字段是小程序各版本的请求域名
*/
module.exports = {
  PROGRAM_NAME: '小程序名字',
  VUE_APP_WX_APPID: '123456789',
  develop_url: 'dev-baidu.com', // 本地版
  trial_url: 'dev-baidu.com', // 体验版（正式环境发版，需要提交审核，审核不可能给微信客服人员正式环境来测试，所以这里的体验版是开发环境）
  release_url: 'baidu.com' // 线上版
}

• modifyManifest.js

const fs = require('fs')
const envDev = require('../env.dev')
const envTest = require('../env.test')
const envBeta = require('../env.beta')
const envPrd = require('../env.prd')

// 匹配当前环境的配置
const envList = [
  { key: 'development', value: envDev },
  { key: 'test', value: envTest },
  { key: 'beta', value: envBeta },
  { key: 'production', value: envPrd }
]
const env = envList.find(item => item.key === process.env.NODE_ENV)

// 改写manifest.json文件的appid
fs.readFile(
  `${__dirname}/manifest.json`,
  (err, data) => {
    if (err) {
      console.error(err)
    } else {
      let _data = JSON.parse(data.toString())
      _data['mp-weixin'].appid = env.value.VUE_APP_WX_APPID

      _data = JSON.stringify(_data)
      // 写入
      fs.writeFile(`${__dirname}/manifest.json`, _data, {
        encoding: 'utf-8'
      }, (err) => {
        if (err) {
          console.error('配置失败', err)
        } else {
          console.log('appid配置成功：', env.value.PROGRAM_NAME)
        }
      })
    }
  }
)
// 改写requestUrl.json文件的请求域名
fs.readFile(
  `${__dirname}/requestPath.json`,
  (err, data) => {
    if (err) {
      console.error(err)
    } else {
      let _data = JSON.parse(data.toString())
      _data.develop_url = env.value.develop_url
      _data.trial_url = env.value.trial_url
      _data.release_url = env.value.release_url
      _data = JSON.stringify(_data)
      // 写入
      fs.writeFile(`${__dirname}/requestPath.json`, _data, {
        encoding: 'utf-8'
      }, (err) => {
        if (err) {
          console.error('域名配置失败：', err)
        } else {
          console.log('域名配置成功：', env.key)
        }
      })
    }
  }
)

• requestPath.json

{
  "develop_url": "test-baidu.com",
  "trial_url": "test-baidu.com",
  "release_url": "baidu.com"
}

• App.vue

<script>
import config from './requestPath.json'

// 运行环境
const runtime = __wxConfig.envVersion
// 设置请求域名
let base = ''
switch (runtime) {
  case 'develop': // 本地
    base = config.develop_url
    break
  case 'trial': // 体验版
    base = config.trial_url
    break
  default: // release 正式版
    base = config.release_url
}

export default {
  onLaunch() {
    console.log(`${runtime}环境：${this.globalData.baseURL}`)
  },
  globalData: {
    baseURL: `https://${base}`,
    socketUrl: `wss://${base}`
  }
}
</script>

• package.json

关键代码是scripts里的运行命令，分别是build:dev，build:test，build:beta，build:pro这四个。

{
  "name": "xxx",
  "version": "1.0.0",
  "private": true,
  "author": {
    "name": "wangpeng",
    "email": "[email protected]"
  },
  "scripts": {
    "serve": "cross-env NODE_ENV=development node src/modifyManifest.js && npm run dev:mp-weixin",
    "build:dev": "cross-env NODE_ENV=development node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:test": "cross-env NODE_ENV=test node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:beta": "cross-env NODE_ENV=beta node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:pro": "cross-env NODE_ENV=production node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "lint": "eslint ./src --ext .vue,.js",
    "lint-fix": "eslint --fix ./src --ext .vue,.js",
    "prepare": "husky install",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.1-33920220314002",
    "@dcloudio/uni-h5": "^2.0.1-33920220314002",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-i18n": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-360": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-alipay": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-baidu": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-jd": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-kuaishou": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-lark": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-qq": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-toutiao": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-vue": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-weixin": "^2.0.1-33920220314002",
    "@dcloudio/uni-quickapp-native": "^2.0.1-33920220314002",
    "@dcloudio/uni-quickapp-webview": "^2.0.1-33920220314002",
    "@dcloudio/uni-stat": "^2.0.1-33920220314002",
    "@dcloudio/uni-ui": "^1.4.13",
    "@vue/shared": "^3.2.31",
    "crypto-js": "3.3.0",
    "js-base64": "^3.7.2",
    "mp-progress": "^1.2.14",
    "regenerator-runtime": "^0.12.1",
    "uview-ui": "^2.0.33",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/runtime": "~7.12.0",
    "@dcloudio/types": "*",
    "@dcloudio/uni-automator": "^2.0.1-33920220314002",
    "@dcloudio/uni-cli-i18n": "^2.0.1-33920220314002",
    "@dcloudio/uni-cli-shared": "^2.0.1-33920220314002",
    "@dcloudio/uni-migration": "^2.0.1-33920220314002",
    "@dcloudio/uni-template-compiler": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-33920220314002",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.1-33920220314002",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.1-33920220314002",
    "@vue/cli-plugin-babel": "~4.5.12",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.12",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "husky": "^7.0.2",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "node-sass": "^4.9.3",
    "postcss-comment": "^2.0.0",
    "sass-loader": "^10.2.1",
    "vue-template-compiler": "^2.6.11",
    "core-js": "^3.6.5"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {
    "scripts": {}
  }
}

---

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；

往期文章

• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金