uniapp 打包时如何动态修改manifest.json的值

在uniapp打包时，如何动态修改manifest.json中的值？比如在不同环境下需要动态调整appid、版本号或权限配置，有没有自动化方案或钩子方法可以实现？求具体操作步骤或插件推荐。

2 回复

在uniapp中，可通过以下方式动态修改manifest.json：

  1. 使用process.env.UNI_PLATFORM判断平台
  2. 在vue.config.js中通过configureWebpack配置
  3. 使用环境变量区分不同配置
  4. 通过脚本在打包前动态修改文件

示例：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_NAME': JSON.stringify(process.env.NODE_ENV === 'production' ? '生产环境' : '开发环境')
      })
    ]
  }
}

在 UniApp 中，动态修改 manifest.json 的值可以通过以下方法实现：

1. 使用环境变量和构建脚本

在项目根目录创建 config 文件夹，存放不同环境的配置文件（如 dev.js、prod.js），通过脚本在打包时替换 manifest.json 中的值。

步骤：

  1. 创建环境配置文件：

    // config/prod.js
module.exports = {
  appid: '你的生产环境AppID',
  appname: '生产环境应用名'
};

  2. 编写 Node.js 脚本（如 build.js）：

    const fs = require('fs');
const manifestPath = './src/manifest.json';
const config = require('./config/prod.js'); // 根据环境加载配置

let manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
// 动态修改字段
manifest['mp-weixin'].appid = config.appid;
manifest.name = config.appname;

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

  3. 在 package.json 中配置脚本：

    "scripts": {
  "build:prod": "node build.js && uni-build"
}

2. 使用 HBuilderX 的“自定义条件编译”

在 manifest.json 中通过条件编译实现动态配置：

{
  "name": "//#ifdef PROD\n生产环境名称\n//#endif\n//#ifdef DEV\n开发环境名称\n//#endif",
  "mp-weixin": {
    "appid": "//#ifdef PROD\n生产AppID\n//#endif\n//#ifdef DEV\n开发AppID\n//#endif"
  }
}

打包时通过 HBuilderX 选择不同环境条件编译。

注意事项：

  • 直接修改 manifest.json 需在打包前执行脚本。
  • 条件编译方式依赖 HBuilderX 的编译环境。
  • 确保修改后的 JSON 格式正确。

选择适合项目需求的方法即可实现动态配置。

回到顶部