uniapp 根据不同的build命令获取不同环境的配置信息

最新推荐文章于 2024-09-23 10:24:07 发布

inprivacy

最新推荐文章于 2024-09-23 10:24:07 发布

阅读量2.3k

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_42959829/article/details/127675892

版权

uniapp 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

有些时候，我们一个项目有多个环境：开发、测试、生产。那每次build的时候来回切换环境配置信息，就特别的繁琐，还存在信息改漏的情况。

以防这种情况，我们可以分别针对不同的环境（不同的项目也可以）分别写一个配置文件。

配置如下：

1. 项目根目录下，创建对应环境配置文件 .env.test、.env.developemnt、.env.production

2. 只举一个环境的配置例，其余环境做对应配置就好 .env.developemnt

NODE_ENV='development'
VUE_APP_HG_APP_BASE_URL='ip\域名'
VUE_APP_VERSION_CODE=100
VUE_APP_VERSION_NAME='1.0.0

module.exports = {
    NODE_ENV:NODE_ENV,
    VUE_APP_HG_APP_BASE_URL:VUE_APP_HG_APP_BASE_URL,
    VUE_APP_VERSION_CODE:VUE_APP_VERSION_CODE,
    VUE_APP_VERSION_NAME:VUE_APP_VERSION_NAME,
}

3. 与module.exports 同级的参数配置，是为了在uniapp项目中，可以直接通过process.env来获取，而module.exports导出这些参数是方便在manifestModify.js中获取，因为在manifestModify.js中无法通过process.env来获取

4. 新建与manifest.json同级的js文件manifestModify.js，通过node的js模块来进行文件的读写

const fs = require("fs");
const envDev = require("../.env.development"); //development配置信息
const envPrd = require("../.env.production"); //production配置信息
const envTest = require("../.env.test"); //test配置信息

fs.readFile(`${__dirname}/manifest.json`, function (err, data) {
  let VUE_APP_VERSION_NAME;
  let VUE_APP_VERSION_CODE;

  switch (process.env.NODE_ENV) {
    case "development":
      VUE_APP_VERSION_NAME = envDev.VUE_APP_VERSION_NAME;
      VUE_APP_VERSION_CODE = envDev.VUE_APP_VERSION_CODE;
      break;
    case "test":
      VUE_APP_VERSION_NAME = envTest.VUE_APP_VERSION_NAME;
      VUE_APP_VERSION_CODE = envTest.VUE_APP_VERSION_CODE;
      break;
    case "production":
      VUE_APP_VERSION_NAME = envPrd.VUE_APP_VERSION_NAME;
      VUE_APP_VERSION_CODE = envPrd.VUE_APP_VERSION_CODE;
      break;
  }

  console.log(process.env.NODE_ENV, VUE_APP_VERSION_NAME, VUE_APP_VERSION_CODE);

  if (err) {
    console.error(err);
  } else {
    var _data = JSON.parse(data.toString());

    _data["versionName"] = VUE_APP_VERSION_NAME;
    _data["versionCode"] = VUE_APP_VERSION_CODE;

    _data = JSON.stringify(_data);

    // 写入
    fs.writeFile(
      `${__dirname}/manifest.json`,
      _data,
      {
        encoding: "utf-8",
      },
      function (err) {
        if (err) {
          console.log("写入失败", err);
        } else {
          console.log("写入成功");
        }
      }
    );
  }
});

5. 命令配置在package.json中，一定要先确定NODE_ENV，再执行node

{
    scripts:{
            "build:app-plus": "cross-env NODE_ENV=production node src/manifestModify.js && cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
            "build:app-plus-test": "cross-env NODE_ENV=test node src/manifestModify.js && cross-env NODE_ENV=test UNI_PLATFORM=app-plu vue-cli-service uni-build",
    }
}

以上，执行不同的build命令，就可以获取不同的环境配置了 ؏؏☝ᖗ乛◡乛ᖘ☝؏؏