uniapp 区分环境

uniapp 区分环境的方法

在 uniapp 中，可以通过多种方式区分开发环境、测试环境和生产环境。以下是几种常用的方法：

使用 process.env.NODE_ENV

uniapp 基于 Vue 和 Webpack，可以通过 process.env.NODE_ENV 获取当前环境。通常在开发环境下值为 development，生产环境下为 production。

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

配置 manifest.json

在 manifest.json 文件中，可以通过自定义条件编译来区分环境。

{
  "app-plus": {
    "distribute": {
      "android": {
        "debug": "开发环境配置",
        "release": "生产环境配置"
      }
    }
  }
}

使用条件编译

uniapp 支持条件编译，可以通过 #ifdef 和 #ifndef 区分不同平台或环境。

// #ifdef H5
console.log('H5 环境');
// #endif

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

自定义环境变量

在项目根目录下创建 .env 文件，定义不同环境变量。

# .env.development
VUE_APP_ENV = development
API_BASE_URL = https://dev.example.com

# .env.production
VUE_APP_ENV = production
API_BASE_URL = https://api.example.com

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

console.log(process.env.VUE_APP_ENV);
console.log(process.env.API_BASE_URL);

动态配置

可以通过在 main.js 中动态设置全局变量来区分环境。

let baseUrl;
if (process.env.NODE_ENV === 'development') {
  baseUrl = 'https://dev.example.com';
} else {
  baseUrl = 'https://api.example.com';
}

Vue.prototype.$baseUrl = baseUrl;

注意事项

• 使用 process.env 时需确保项目配置正确，部分打包工具可能需要额外配置。
• 条件编译仅适用于 uniapp 支持的平台，无法直接用于自定义环境区分。
• 自定义环境变量需以 VUE_APP_ 开头，否则可能无法被识别。

以上方法可根据实际需求选择使用，通常结合 process.env 和自定义环境变量能够满足大多数场景。