更新记录

1.0(2022-04-12) 下载此版本

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.12 app-vue app-nvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

本文使用的项目是通过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创建的项目怎么配置环境变量,敬请期待!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

未采集数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问