当前位置:首页 > uni-app

uniapp 区分环境

2026-02-05 21:47:49uni-app

区分开发与生产环境

在uniapp中可以通过process.env.NODE_ENV判断当前环境。开发环境下值为development,生产环境下值为production。这种方式适用于H5平台。

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境');
} else {
  console.log('生产环境');
}

使用条件编译

通过uniapp的条件编译特性,可以针对不同平台编写特定代码。语法格式为// #ifdef// #endif

// #ifdef H5
console.log('当前是H5平台');
// #endif

// #ifdef MP-WEIXIN
console.log('当前是微信小程序平台');
// #endif

配置多环境变量

在项目根目录创建.env文件管理环境变量,不同环境使用不同后缀:

  • .env.development 开发环境
  • .env.production 生产环境

文件内容示例:

VUE_APP_API_BASE = https://dev.api.example.com

代码中通过process.env.VUE_APP_API_BASE访问变量值。

动态配置接口地址

结合环境变量和条件编译,可以实现动态接口配置:

let baseURL;
// #ifdef H5
baseURL = process.env.VUE_APP_API_BASE;
// #endif

// #ifdef MP-WEIXIN
baseURL = 'https://wx.api.example.com';
// #endif

打包时指定环境

在package.json中配置不同环境的打包命令:

"scripts": {
  "build:prod": "uni-build --mode production",
  "build:dev": "uni-build --mode development"
}

运行npm run build:prod将使用生产环境配置打包。

小程序环境判断

微信小程序中可使用wx.getAccountInfoSync()获取环境信息:

uniapp 区分环境

const accountInfo = wx.getAccountInfoSync();
console.log(accountInfo.miniProgram.envVersion);
// 返回值:develop(开发版)、trial(体验版)、release(正式版)

注意事项

H5平台的环境变量需要以VUE_APP_开头才能被正确识别。不同平台的环境判断方式可能有所差异,建议结合条件编译使用。生产环境打包前务必检查所有环境相关配置是否正确。

标签: 环境uniapp
分享给朋友:

相关文章

uniapp使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含n…

uniapp可以用vant吗

uniapp可以用vant吗

uniapp中使用Vant组件库的可行性 Vant是专为Vue.js设计的移动端组件库,而uniapp是一个跨平台开发框架。两者并非原生兼容,但可通过以下方式实现部分Vant组件的使用。 方法一:使…

uniapp gpio

uniapp gpio

在 uniapp 中直接操作 GPIO(通用输入输出)通常需要依赖原生平台的硬件接口,因为 uniapp 本身是基于前端技术的跨平台框架,不直接提供硬件访问能力。以下是实现 GPIO 控制的几种方法:…

如何安装java环境

如何安装java环境

下载JDK安装包 访问Oracle官方网站或OpenJDK项目页面,选择适合操作系统的JDK版本(如Windows、macOS或Linux)。确保下载与系统架构匹配的版本(32位或64位)。 运行安…

uniapp grid

uniapp grid

uniapp grid 布局实现方法 在 uniapp 中实现 grid 布局可以通过多种方式完成,包括使用内置组件、CSS Grid 或第三方插件。以下是几种常见的实现方法: 使用 uni-gri…

uniapp 退场动画

uniapp 退场动画

实现退场动画的方法 在UniApp中实现退场动画可以通过CSS动画、Vue过渡效果或第三方动画库完成。以下是几种常见方法: 使用CSS动画 通过定义@keyframes和animation属性实现退…