当前位置:首页 > uni-app

uniapp 区分环境

2026-01-15 18:06:39uni-app

uniapp 区分环境的方法

uniapp 提供了多种方式来区分开发环境和生产环境,以便在不同环境下执行不同的逻辑或配置。以下是常见的几种方法:

使用 process.env.NODE_ENV
在代码中可以通过 process.env.NODE_ENV 获取当前环境,值为 development(开发环境)或 production(生产环境)。
示例代码:

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

配置 manifest.json 的自定义条件编译
manifest.json 中配置自定义条件编译变量,通过 process.env.UNI_PLATFORMprocess.env.UNI_OS 区分平台或操作系统。
示例:

{
  "h5": {
    "devServer": {
      "port": 8080
    }
  },
  "mp-weixin": {
    "appid": "your-appid"
  }
}

通过条件编译区分平台
uniapp 支持条件编译语法,可以在代码中直接根据不同平台执行不同逻辑。
示例:

uniapp 区分环境

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

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

自定义环境变量
在项目根目录下创建 .env.env.development.env.production 文件,分别配置不同环境变量。
示例 .env.development

VUE_APP_API_BASE_URL=http://dev.example.com/api

示例 .env.production

uniapp 区分环境

VUE_APP_API_BASE_URL=https://prod.example.com/api

在代码中通过 process.env.VUE_APP_API_BASE_URL 访问。

使用 uni.getSystemInfoSync() 区分运行环境
通过 uni.getSystemInfoSync() 获取运行环境信息,如操作系统、平台等。
示例代码:

const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.platform); // 输出运行平台(ios、android 等)

结合构建命令区分环境
package.json 中配置不同的构建命令,传递环境变量。
示例:

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development uni-build",
    "build:prod": "cross-env NODE_ENV=production uni-build"
  }
}

以上方法可以根据实际需求选择或组合使用,灵活应对不同场景下的环境区分需求。

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

相关文章

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

投票 uniapp

投票 uniapp

uniapp 投票功能实现 uniapp 是一个基于 Vue.js 的跨平台开发框架,可以用于开发微信小程序、H5、App 等多种应用。实现投票功能需要结合前端界面和后端数据处理。 前端界面设计 使…

甜uniapp

甜uniapp

甜uniapp的定义 甜uniapp并非官方术语,可能是对uniapp开发中“高效、便捷、愉悦”体验的形容,或特定场景下的优化方案。通常指通过技巧、插件或架构设计提升uniapp开发效率和用户体验。…

uniapp真垃圾

uniapp真垃圾

关于对UniApp的评价,存在不同的声音。以下从技术特性、适用场景及常见争议点展开分析,供开发者参考: 技术特性与优势 UniApp基于Vue.js框架,支持多端编译(微信小程序、H5、App等),…

uniapp 网络封装

uniapp 网络封装

uniapp 网络请求封装方法 uniapp 提供了 uni.request 方法进行网络请求,但直接使用可能导致代码重复和维护困难。封装网络请求可以提高代码复用性和可维护性。 基础封装示例 创建一…

uniapp前端渲染

uniapp前端渲染

uniapp前端渲染的基本原理 uniapp基于Vue.js框架,采用了一套代码多端运行的机制。前端渲染主要通过Vue的虚拟DOM技术实现,在不同平台(H5、小程序、App等)上会编译为对应平台的渲染…