HBuilderx uni-app配置环境变量 / 自定义环境变量

uni-app官网关于环境变量的三种配置方法

方法1:vue.config.js
支持情况:
CLI 工程
HBuilderX 2.1.5 及以上版本
注意:仅vue页面生效

方法2:.env
支持情况:
CLI 工程

方法3:package.json
本文主要围绕package.json这个配置方法来展开。

首先在根目录下创建(若没有)package.json文件,并写入以下代码。
!切记复制以下代码需要去掉所有注释,在package.json中不能有任何注释,否则会报错。

{
    /**
     package.json其它原有配置 
     在复制代码时记得去掉注释
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置,可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                    "ANY_PARMS": "",
                    "XXX": "YYY"
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
                }
            }
        }    
    }
}

env这个变量里面添加自定义的变量,在其他地方可以通过process.env.xxx取出来。
process.env.NODE_ENV不可以自定义,不可改写,改写无效。如果需要通过当前环境来决定变量则需要通过判断赋值或三目运算符赋值。

// 判断
if(process.env.NODE_ENV === 'development') {
	// 赋值 or 其他逻辑
} else if(process.env.NODE_ENV === 'prodution' {
	// 赋值 or 其他逻辑
} else {}

// 三目运算符
const url = process.env.ENV === 'development' ? 'localhost:xxx' : 'www.xxx.com'

最后HBuilder会根据package.json配置文件会出现我们自定义的环境来运行
在这里插入图片描述
新建或修改package.json这类配置文件后需要重新编译一次。

在运行处编译文件是development环境,在发布处编译文件是production,选择production环境编译出来的文件路径会有所改变,需要留意控制台输出的信息!

HBuilderX是DCloud推出的一款跨平台的开发工具,而uni-app是基于Vue.js框架的一种跨平台应用开发解决方案。下面我将简要介绍HBuilderX uni-app的开发教程。 1. 环境搭建:首先,我们需要下载并安装HBuilderX开发工具,然后在工具的插件市场中搜索并安装uni-app插件。安装完成后,打开HBuilderX,点击新建uni-app项目,选择你的开发平台(如App、小程序等)和模板,填写项目名称和存储路径,点击完成即可创建一个uni-app项目。 2. 组件使用:uni-app开发中使用的是Vue.js框架,所以你可以使用Vue语法来编写你的界面和逻辑。在HBuilderX的编辑器中,可以直接创建和编辑uni-app项目中的页面,你可以添加页面、组件和自定义样式等。 3. API调用:uni-app封装了一些常用的API接口,可以用来进行数据交互、地理位置服务、摄像头调用等。你可以在编写代码的过程中,直接调用这些API接口来完成你的功能。 4. 打包发布:完成开发后,你可以选择将你的uni-app项目打包发布到不同的平台,如App、小程序等。在HBuilderX中,你可以选择对应的平台,然后进行打包操作。 总的来说,使用HBuilderX开发uni-app项目可以让你在一个工具中完成多个平台的开发,极大地提高了开发效率和便利性。你可以通过学习和实践上面的教程,掌握HBuilderX uni-app开发的基本技能,进行跨平台开发。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值