更新记录

1.0（2022-04-12） 下载此版本

首次提交项目项目地址,项目源码uniapp环境配置

平台兼容性

本文使用的项目是通过hbuilderX创建的，仅讨论hbuilderX创建项目的自定义环境变量设置，使用cli创建的项目怎么样自定义环境变量，官方文档上有说明。

本文经验共享图文链接根据运行环境自定义环境变量

本文CSDN图文链接uni-app根据运行环境自定义环境变量

需求背景

随着用户使用平台的增多，WEB、H5、微信小程序、钉钉小程序、各种小程序，都需要前端来维护，uniapp一套代码多端应用解决了这个问题，但是又有一个新的问题， 大部分系统部署到生产环境之前，或多或少的要经过：本地开发、测试环境测试、预生产环境测试这几个环节。而且每一步对应的系统参数有可能是不一样的。 官方也给出了一些思路： 运行环境管理

H5或者WEB怎么区分是在测试环境还是在生产环境？ 大家都会想到：可以通过process.env.NODE_ENV==='development'区分，

但是怎么区分打包部署在测试环境还是生产环境呢？ 自定义环境变量呗， 还好，uniapp可以设置环境变量，我在vue.config.js里面配置个环境变量参数不就解决了。但是HBuilderX创建的项目只能在vue.config.js里添加环境变量，配置.env文件不可以。（使用cli创建的uniapp项目我还没有试过可不可以）

H5是的环境变量应该是解决了。。。但是，每次打包之前都确认和修改一下环境变量参数，是个很烦人的操作。

而且大部分开发者用uni-app，意图绝对不是在写h5页面或者web页面（如果是vue、react不香吗？）。微信小程序差不多和H5使用同样的方法解决，（其他小程序我没有试）。 然而uniapp运行app,发行app的process.env.NODE_ENV 是'product'，根本没有development一说，那APP怎么区分这是在本地开发还是生产上线了呢？

解决思路

扩展平台

uniapp技术文档--扩展新的平台 那是不是也可以专门针对测试环境和生产环境扩展一个平台，然后在扩展参数里写一下我的自定义环境变量。 于是乎，我就照着官方例子，扩展了一个WEB平台，参数如下

"h5-web": {
            "title": "WEB本地开发和测试环境打包",
            "env": {
                "UNI_PLATFORM": "h5",
                "browser": "chrome",
                "VUE_APP_TITLE": "Hbuilder环境参数配置示例-WEB" // 其他自定义环境变量
            },
            "define": {
                "H5-WEB": true
            }
        },

运行和打包都可以使用这个扩展平台了，环境变量的问题也解决了？ 但是其他自定义环境变量不生效，被知道为什么，process.env里就是没有（要是有在扩展平台自定义环境变量成功的朋友，能不能告诉我哪里写错了。） 那怎么办？我灵机一动想到了条件编译，于是就有了下面的代码

const is_development = process.env.NODE_ENV === 'development'
export const config = {
    CURRENT_MODE: 'dev',
    BASE_URL: '/dev',
    ALERT_MSG: '这是H5测试页面，所有数据和业务仅为测试使用，不会产生实际业务影响',
    MODE_CN: '测试环境H5',
    CONFIG_PLATFORM: 'DEV_H5',
    // #ifdef H5-WEB
    ALERT_MSG: '这是WEB测试页面，所有数据和业务仅为测试使用，不会产生实际业务影响',
    MODE_CN: '测试环境WEB',
    CONFIG_PLATFORM: 'DEV_WEB'
    // #endif
}

判断AppId

APP自定义环境变量得另想方法了，翻阅了以下参考文档： 基础配置 DCloud appid 用途/作用/使用说明 APP专题 HTML5PULS HTML5+ API Reference--runtime 想到了一个方法，测试环境和生产环境的appid不能一样，而且appid是可以使用代码获取到的，那是不是可以判断appid，确定是在哪个环境，然后使用不同的环境变量。有了下面的代码

const PRO_APPID = "开发环境appid", // 开发环境appid
    DEV_APPID = "生产环境appid", // 生产环境appid
    HB_APPID = "HBuilder"; // HBuilder调试基座
// puls是app才有的变量
const APP_ID = plus.runtime.appid;
// 测试环境的配置
let config = {
    BASE_URL: 'http://dev/url',
    CURRENT_MODE: 'dev',
    MODE_CN: '测试环境APP'
}

// HBuilder调试基座
if (APP_ID === HB_APPID) {
    config.ALERT_MSG = "您正在使用HBuilder调试基座，请切换至本系统开发环境调试基座，如有技术问题，请咨询工号124546";
    config.CONFIG_PLATFORM= 'HBuilder_APP'
}
// 开发环境
if (APP_ID === DEV_APPID) {
    config.ALERT_MSG = "您正在使用本系统开发环境调试基座，所有数据和业务仅为测试使用，不会产生实际业务影响，如要办理实际业务，请在应用市场下载本app。"
    config.CONFIG_PLATFORM = 'DEV_APP'
}
if (APP_ID === PRO_APPID) {
    // 生产环境的配置
    config = {
        BASE_URL: 'https://product/url',
        CURRENT_MODE: 'product',
        CONFIG_PLATFORM: 'APP',
        MODE_CN: '生产环境APP'

    }
}

export const envConfig = {
    APP_ID,
    ...config
}

注：自定义调试基座的appid为制作自定义调试基座的时候mainfest.json中配置的appid。 在结合 static 目录的条件编译 进行代码优化。 然后又扩展了个平台

"uni-app": {
        "scripts": {
            "h5-web": {
                "title": "WEB本地开发和测试环境打包",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "browser": "chrome",
                    "VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
                },
                "define": {
                    "H5-WEB": true
                }
            },
            "h5-webpro": {
                "title": "WEB生产环境打包",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "browser": "chrome",
                    "VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
                },
                "define": {
                    "H5-WEBPRO": true
                }
            },
            "h5-pro": {
                "title": "h5生产环境打包",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "browser": "chrome",
                    "VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
                },
                "define": {
                    "H5-PRO": true
                }
            },
            "mp-weixin-pro": {
                "title": "微信小程序生产环境打包",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
                },
                "define": {
                    "MP-WEIXIN-PRO": true
                }
            }
        }
    }

整理以后的项目地址uniapp环境配置，有需要的可以自行下载测试。

成果检验

扩展平台

H5

本地调试H5测试环境

操作：运行到浏览器

[attach]88516[/attach]

本地调试生产环境H5

操作：运行>>h5生产环境打包

[attach]88518[/attach]

测试环境H5发行部署

操作：发行>>网站-PC WEB或手机H5（仅适用于uni-app）

[attach]88512[/attach]

生产环境H5发行部署

操作：发行>>自定义发行>>h5生产环境打包

[attach]88514[/attach]

web

本地调试测试环境web

操作：运行>>WEB本地开发和测试环境打包

[attach]88517[/attach]

本地调试生产环境web

操作：运行>>WEB生产环境打包

[attach]88519[/attach]

测试环境web发行部署

操作：发行>>自定义发行>>WEB本地开发和测试环境打包

[attach]88513[/attach]

生产环境web发行部署

操作：发行>>自定义发行>>WEB生产环境打包

[attach]88515[/attach]

微信小程序

本地调试测试环境微信小程序

操作：运行到小程序模拟器>>微信开发者工具

[attach]88521[/attach]

本地调试生产环境微信小程序

操作：运行>>微信小程序生产环境打包

[attach]88524[/attach]

测试环境微信小程序发行部署

操作：发行>>小程序微信（仅适用于uni-app）

[attach]88523[/attach]

生产环境微信小程序发行部署

操作：发行>>自定义发行>>微信小程序生产环境打包

[attach]88525[/attach]

判断APPID

APP

使用默认调试基座

操作：运行>运行到手机或模拟器>模拟器（基座选择默认调试基座）

[attach]88520[/attach]

使用自定义调试基座或者使用测试appid打包

自定义调试基座操作：运行>运行到手机或模拟器>模拟器（基座选择自定义调试基座） 测试app：打包流程和app打包流程一致，注意修改mainfest.json文件中的appid。 注：本文测试省事，测试环境和自定义调试基座使用了同一个appid。但是建议自定义调试基座，测试环境，生产环境不要使用同一个appid。 [attach]88522[/attach]

生产环境app打包安装

操作：打包流程和app打包流程一致，注意修改mainfest.json文件中的appid。 [attach]88526[/attach]

项目使用须知

1、请升级Hbuilder到最新版本，要不然可能有些条件编译的样式不生效。 2、请修改\static\app-plus\config.js不同环境的appid为自己项目的 3、运行之前cnpm install 安装一下依赖呦 4、使用cli创建的项目我还没有测试，后面会专门更新一遍cli创建的项目怎么配置环境变量，敬请期待！