一站式解决方案：uni-app条件编译及多环境配置，appid动态修改攻略！

客官°小女子只卖身不卖艺 2024-04-29 19:20 44阅读 0赞

### 前言 ###

这篇文章主要介绍`uniapp`在`Hbuilderx` 中，通过工程化，区分不同环境、动态修改小程序`appid`以及自定义条件编译，解决代码`发布`和`运行时`手动切换到问题。

### 背景 ###

在企业级的应用中，通常会分为，开发、联调、生产等多个环境，一个项目可能要发布到多个微信小程序，在工程化中，通过使用不同的打包命令设置不同的环境变量，解决不同环境各变量的内容需手动修改的问题，比如：接口、前缀、`appid`等；在使用uniapp开发项目时，通常使用`Hbuilder`可视化运行项目，点击运行编译出来都代码环境是`（development）`，点击发布运行编译出来的代码是`（production）`，分别对应开发和生产，使用`process.env.NODE_ENV`来获取运行环境。但是在很多企业项目中，就两个环境，很难满足使用场景。

为了解决以上问题，通过在`package.json`中增加增加 `uni-app节点`，自定义条件编译和环境，通过`modifyManifest.js`重写`appid`，扩展`vue.config.js`配置，用环境标识区分接口

### 一、自定义条件编译 ###

以微信小程序为例，在做条件编译时候，只有一种判断条件

<view>我是微信</view>
    
    
        <view>我是后</view>

但实际情况是，我们有两个微信主体，希望在不同主体展示不同信息：

<view>我是CJN</view>
    
    
        <view>我是YYT</view>

在`package.json`中新增`uni-app`[官网自定义配置][Link 1]；  
  
实际使用时，删除掉文件中所有的注释信息，否则编译时会报错。

{
        "uni-app": {
            "scripts": {
                "cjnDev": {
                    "title":"小程序1-联调环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "cjnDev"
                    },
                    "define": {
                        "MP-CJN": true
                    }
                },
                "cjnTest": {
                    "title":"小程序1-测试环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "cjnTest"
                    },
                    "define": {
                        "MP-CJN": true
                    }
                },
                "cjnProd": {
                    "title":"小程序1-生产环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "cjnProd"
                    },
                    "define": {
                        "MP-CJN": true
                    }
                },
                "yytDev": {
                    "title":"小程序2-联调环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "yytDev"
                    },
                    "define": {
                        "MP-YYT": true
                    }
                },
                "yytTest": {
                    "title":"小程序2-测试环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "yytTest"
                    },
                    "define": {
                        "MP-YYT": true
                    }
                },
                "yytProd": {
                    "title":"小程序2-生产环境",
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",
                        "NAME": "yytProd"
                    },
                    "define": {
                        "MP-YYT": true
                    }
                }
            }    
        }
    }

`注意：尽量保证yytProd和NAME值保持一致`  
  
以上代码以微信小程序在不同主体的展示为例，分别为`小程序1(MP-CJN)、小程序2（MP-YYT）`，同时区分了三个环境，联调、测试和生产，配置好以后，我们在Hbuilder中点击运行和发行可以看到下面效果

![ee70d202403091044358594.png][]

这时就可以使用``来实现在微信平台，区分不同主体的条件编译，通过环境变量`process.env.NAME`取得配置文件中`NAME`的信息

#### 二、配置其他变量   创建\`env.js\`，存放相关环境变量的信息；我是在common中创建的，可以根据自己项目实际情况选择目录 ####

module.exports = {
        // 小程序1联调环境
        cjnDev: {
            requestUrl: 'https://mp.com',
            appid: '小程序appid'
        },
        // 小程序1测试环境
        cjnTest: {
            requestUrl: '接口地址',
            appid: '小程序appid'
        },
        // 小程序1线上环境
        cjnProd: {
            requestUrl: '接口地址',
            appid: '小程序appid'
        }
        // 小程序2联调环境
        yytDev: {
            requestUrl: '接口地址',
            appid: '小程序appid'
        },
        // 小程序2测试环境
        yytTest: {
            requestUrl: '接口地址',
            appid: '小程序appid'
        },
        // 小程序2线上环境
        yytProd: {
            requestUrl: '接口地址',
            appid: '小程序appid'
        }
    }

其中变量名 `cjnDev`、`cjnTest`、`cjnProd`等要跟`package.json`中的`NAME`一致，方便后续通过变量名取值。  
  
在根目录下创建`vue.config.js`

let configUrl = require('./common/env.js');
    // 动态修改appid，调试环境时，可以先注释掉
    require('./src/modifyManifest.js');
    module.exports = {
        chainWebpack: config => {
          config
            .plugin('define')
            .tap(args => {
                args[0]['process.env.config'] = JSON.stringify(configUrl)
                return args
            })
        }
    }

通过定义一个全局的变量`process.env.config`存储的就是`env.js`中的全部变量信息，此时就可以直接获取到当前运行所对应的配置信息

// 运行小程序1-联调环境 获得：https://mp.com
    le url = process.env.config[process.env.NAME].requestUrl

#### 动态修appid ####

`appid`在项目根目录的`manifest.json`内，动态修改逻辑是使用`nodejs`的`fs`模块，通过方法`readFileSync`读取文件，然后跟进当前环境对内容进行修改，最后通过`writeFileSync`写入到`manifest.json`中  
  
在`src`目录下创建`modifyManifest.js`，`划重点：一定得是在src目录下`

关于环境变量，此时获取不到`process.env.NAME`，通过打印可以看到`process.env.UNI_SCRIPT`与NAME的值一致，这也是为什么我们前面强调：‘尽量保证`yytProd`和`NAME`值保持一致’的原因。

![f84c8202403091043466109.png][]

### 三、使用方式 ###

1. 本地调试运行：Hbuilder->运行，选择对应的自定义环境执行  
  
2. 上线发布：Hbuilder->发行->自定义发行，选择对应的自定义环境执行  
  
3. 业务开发通过\`process.env.config\[process.env.NAME\]\`获取对应环境的变量对象

[Link 1]: https://uniapp.dcloud.net.cn/collocation/package.html
[ee70d202403091044358594.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/23b4ac4dcd2740d88cfe63a7c286e827.png
[f84c8202403091043466109.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/9526453d350a4012878de718a586ce97.png