当前位置:首页 > 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()获取环境信息:

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

注意事项

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

uniapp 区分环境

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

相关文章

uniapp树形选择

uniapp树形选择

uniapp树形选择实现方法 使用uni-data-checkbox组件 uniapp内置的uni-data-checkbox组件支持树形结构选择,适用于多级分类场景。配置时需要将数据格式化为树形结构…

uniapp开发电视应用

uniapp开发电视应用

开发环境准备 确保已安装HBuilderX最新版本,这是uniapp官方推荐的开发工具。安装Node.js环境,用于依赖管理和打包构建。准备Android Studio或Xcode用于调试和打包TV应…

uniapp前端页面

uniapp前端页面

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

uniapp如何赋值

uniapp如何赋值

uniapp 赋值方法 在 uniapp 中,赋值操作可以通过多种方式实现,具体取决于数据类型和场景。 数据绑定赋值 在模板中使用 {{}} 进行数据绑定,通过修改 data 中的值实现动态更…

uniapp如何判断当前环境

uniapp如何判断当前环境

判断当前运行环境 在uniapp中,可以通过uni.getSystemInfoSync()或uni.getSystemInfo()获取系统信息,从而判断当前运行的环境。系统信息中包含platform字…

uniapp可以用vant吗

uniapp可以用vant吗

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