当前位置:首页 > 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 生产环境

文件内容示例:

uniapp 区分环境

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

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

动态配置接口地址

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

uniapp 区分环境

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()获取环境信息:

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

注意事项

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

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

相关文章

uniapp前端页面

uniapp前端页面

Uniapp 前端页面开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端部署(H5、小程序、App等)。以下是开发 Uniapp 前端页面的关键方法和注意事项。…

海康 uniapp

海康 uniapp

海康威视与UniApp集成方案 海康威视的硬件设备(如摄像头、NVR等)与UniApp结合,通常需要通过海康的开放平台API或SDK实现功能调用。以下是具体实现方法: 获取海康威视开放平台权限 注册…

uniapp 用法

uniapp 用法

uniapp 基本概念 uniapp 是一个基于 Vue.js 的跨平台开发框架,支持编译到 iOS、Android、H5 及小程序等多端。其核心特点是“一次开发,多端发布”,通过条件编译实现平台差异…

uniapp营销

uniapp营销

营销策略 采用社交媒体推广,结合微信、微博、抖音等平台进行内容营销。通过短视频、直播等形式展示产品特点,吸引用户关注。利用KOL合作,扩大品牌影响力,提高用户信任度。 用户裂变 设计裂变活动…

介绍uniapp

介绍uniapp

Uniapp 概述 Uniapp 是一款基于 Vue.js 的跨平台开发框架,允许开发者使用一套代码同时生成 iOS、Android、Web 以及小程序应用。其核心优势在于高效开发和代码复用,大幅降低…

uniapp探探

uniapp探探

uniapp实现探探滑动卡片效果 探探的滑动卡片效果主要包含卡片堆叠、左右滑动操作、动画反馈等功能。在uniapp中可以通过以下方式实现类似交互: 使用swiper组件实现基础滑动 uniapp的s…