有些时候,我们一个项目有多个环境:开发、测试、生产。那每次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命令,就可以获取不同的环境配置了     ؏؏☝ᖗ乛◡乛ᖘ☝؏؏

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐