uni-app期望HbuilderX的原生打包能够支持Env mode或者类似的功能

发布于 1周前 作者 itying888 来自 Uni-App

uni-app期望HbuilderX的原生打包能够支持Env mode或者类似的功能

环境 版本号 项目创建方式
dev
test
prod

现在对于不同环境（dev、test、prod）的发版，无论是wgt或者原生包，都需要检查对应git分支上的baseAPI设置是否正确，心智负担较大，而且即使做了比较完成的checkList，安全及稳定性也远不如程序控制来得准确，所以期望能支持env mode功能呢，通过对打包传递不同的mode，进行环境变量的区分


Harmonyos Next教程
1 回复

在uni-app中，虽然HBuilderX的原生打包默认并不直接支持像Webpack中的.env文件这样的环境变量模式，但我们可以通过一些替代方案来实现类似的功能。以下是一个利用manifest.json和condition编译指令的示例，来模拟环境变量的效果。

步骤一：配置manifest.json

首先，在manifest.json文件中，我们可以定义多个自定义条件编译标识。这些标识将用于区分不同的环境。

{
  "mp-weixin": { // 微信小程序配置示例
    "appid": "your-appid",
    "setting": {
      "urlCheck": false
    },
    "condition": { // 条件编译配置
      "scripts": []
    },
    "usingComponents": true
  },
  "custom_conditions": { // 自定义条件编译标识
    "development": true, // 开发环境
    "production": false  // 生产环境
  }
}

步骤二：使用条件编译指令

接着，在代码中利用#ifdef和#endif条件编译指令，根据manifest.json中的配置来包含或排除特定的代码块。

// 在页面的script部分
#ifdef development
console.log('当前是开发环境');
// 开发环境下的特定代码
#else
console.log('当前是生产环境');
// 生产环境下的特定代码
#endif

步骤三：切换环境配置

在打包前，手动或通过脚本修改manifest.json中的custom_conditions部分，以切换环境配置。例如，将开发环境切换到生产环境：

"custom_conditions": {
  "development": false,
  "production": true
}

自动化脚本（可选）

为了简化环境切换的流程，可以编写一个简单的Node.js脚本来自动化这一过程。

const fs = require('fs');
const path = require('path');

const manifestPath = path.join(__dirname, 'manifest.json');
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));

// 切换为生产环境
manifest.custom_conditions.development = false;
manifest.custom_conditions.production = true;

fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');

console.log('环境已切换为生产环境');

通过上述方法，我们可以在uni-app项目中模拟出类似.env文件的环境变量功能，虽然操作稍显繁琐，但能有效区分开发环境和生产环境，确保代码的正确执行。

回到顶部