uni-app 配置编译环境与动态修改manifest.json参数

uni-app开发时，发现有两种创建项目的方式。不管哪一种创建方式，可知：

    1、点击 ‘运行’ 按钮，默认执行的网络环境为：development。此时：

process.env.NODE_ENV === 'development'

    1

    2、点击 ‘发行’ 按钮，默认执行的网络环境为：production。此时：

process.env.NODE_ENV === 'production'

    1

    3、 process.env.NODE_ENV === 'production' 生成包位置：dist/build/mp-weixin。
    4、process.env.NODE_ENV !== 'production' 生成包位置：dist/dev/mp-weixin。

已知这些条件，就想做一些编译优化的处理：
一、配置不同编译环境
1、编译命令配置

为了兼容两种方式创建的项目，同时方便开发调试。出现了相同网络环境，不同配置名称的处理。在项目的根目录 package.json 文件中（可视化创建没有该文件可自行创建），编译配置如下：

  "scripts": {
    
    "prod:release-mp-weixin": "cross-env NODE_ENV=prod UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "rc:release-mp-weixin": "cross-env NODE_ENV=rc UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "test:release-mp-weixin": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "dev:release-mp-weixin": "cross-env NODE_ENV=dev UNI_PLATFORM=mp-weixin vue-cli-service uni-build",

    "prod:mp-weixin": "cross-env NODE_ENV=prod UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "rc:mp-weixin": "cross-env NODE_ENV=rc UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "test:mp-weixin": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=dev UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
  },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

注意：以上编译生成包位置：dist/dev/mp-weixin

另外：

"scripts": {
    // 与点击“发行”编译相同 包位置：dist/build/mp-weixin
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    // 与点击“运行”编译相同 包位置：dist/dev/mp-weixin
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch"
},

    1
    2
    3
    4
    5
    6

【注意】：复制上述代码的时候，记得把备注删除。否则无法运行。
2、文件配置处理

1、创建如下项目结构配置

.
├── env.js // 网络环境的切换在这里处理
└── libs // 该目录下放置对应的网络环境
    ├── env.dev.js        // 开发环境
    ├── env.prod.js        // 生产环境
    ├── env.rc.js            // 预发环境
    └── env.test.js        // 测试环境

    1
    2
    3
    4
    5
    6
    7

2、env.js 代码实现：

// development test rc buildPro/watchPro/production
console.log("==========NODE_ENV:", process.env.NODE_ENV)

let _config = {}
if (process.env.NODE_ENV === 'development'
        || process.env.NODE_ENV === 'dev') {
    _config = require('./libs/env.dev.js')
} else if (process.env.NODE_ENV === 'test') {
    //测试环境
    _config = require('./libs/env.test.js')
}  else if (process.env.NODE_ENV === 'production'
            || process.env.NODE_ENV === 'prod') {
    //生产环境
    _config = require('./libs/env.prod.js')
} else if (process.env.NODE_ENV === 'rc') {
    //rc环境
    _config = require('./libs/env.rc.js')
}

// 给环境变量 process.uniEnv 赋值  使用 process.uniEnv.baseUrl
if (_config) {
    process.uniEnv = {};
    for (let key in _config) {
        process.uniEnv[key] = _config[key];
    }
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

3、对应网络环境域名配置
这里例举一个简单的实例：

const config = {
  baseUrl: 'http://baidu.com', // 主域名
    aaaUrl: 'http://aaa.com',
    bbbUrl: 'http://bbb.com',
    ......
    environment: 'dev'
}

module.exports = config;

    1
    2
    3
    4
    5
    6
    7
    8
    9

4、在根目录的 main.js 中导入

// 网络环境配置（导入便会执行）
import './env/env.js'

    1
    2

二、动态修改manifest.json参数

通过以上，根据不同的编译方式，可以自动的切换不同的网络环境。
但是这时候又碰到了一个问题。不同的网络环境，可能还需要配置不同的小程序appid。作为一个慵懒的程序员，根据不同的网络环境，手动去修改appid那是不可能的。

动态配置appid，本质就是要动态配置 manifest.json 文件内容，先简单了解下该文件的结构：

{
    "name" : "小程序名称",
    "appid" : "__UNI__9329D99",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    "mp-weixin" : {
        "appid": "wxe6fc48a27f7591b1",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : true,
            "minified" : true
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "测试"
            }
        }
    },
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

由以上可知，需要修改的是 mp-weixin.appid 的内容，具体实现步骤如下：
1、创建文件

在src根目录下
在src根目录下
在src根目录下
重要事情说三遍（可视化创建的项目，在项目的根目录下）。创建 modifyManifest.js ，并实现如下代码：

const fs = require('fs')
//此处如果是用HBuilderX创建的项目manifest.json文件在项目跟目录，如果是 cli 创建的则在 src 下，这里要注意
//process.env.UNI_INPUT_DIR为项目所在的绝对路径，经测试，相对路径会找不到文件
const manifestPath = process.env.UNI_INPUT_DIR + '/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')
}

// 动态配置 appid
if (process.env.NODE_ENV === 'production'
    || process.env.NODE_ENV === 'prod'
    || process.env.NODE_ENV === 'rc'){
    replaceManifest('mp-weixin.appid', '正式和预发网络环境的appid')
}else {
    replaceManifest('mp-weixin.appid', '开发和测试网络环境的appid')
}

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39

2、导入

将文件的文件导入到 vue.config.js 文件中：

import './modifyManifest.js'

    1

如果没有 vue.config.js 文件，可自行创建，记住这个文件名称不能改。
三、总结

以上两个步骤实现的本质是：
1、根据不同的编译模式配置不同网络环境。
2、根据不同的编译模式配置不同的小程序appid。
3、根据前面两点总结：根据不同的网络环境动态配置appid。

：只有同时实现了以上了两步，才算是真正的解放了自己的双手。
————————————————
版权声明：本文为CSDN博主「瓜子三百克」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_38633659/article/details/124371008