关于vue.js:通过打包命令中的参数读取不同的系统参数

常常能够在一些我的项目中看到增加了不少的环境变量配置文件, 在 package.json 文件中增加了不少的打包命令。有没有办法实现通过打包命令带上环境参数实现读取不同的参数呢？我想是可行的, 在此简略的实现了一下，
首先第一点须要通过 node 自带的 child_process 模块读取打包命令中的相干参数
在我的项目根目录中新建 build.js 文件，在该文件中退出一下代码

const {exec} = require("child_process");
const os = require("os");
const argv = JSON.parse(process.env.npm_config_argv);
const cooked = argv.cooked;
const idx = 2;
// 通过 npm or yarn
const tool = cooked[3] || "npm";
const argv1 = process.argv;
// 获取打包命令前面的参数
process.env.VUE_APP_SYS_ENV = cooked[idx] || argv1[idx] || "default";

// 执行打包命令通过 shell 脚本命令
const shellBuild = () => {exec(`sh build.sh ${tool}`, (error, stdout, stderr) => {console.log(stdout);
    console.log(stderr);
    if (error !== null) {console.log(`exec error: ${error}`);
    }
  });
};
// 间接应用 node 中 child_process 的 exec 办法执行打包命令
const notShellBuid = () => {
  let shell = "npm run build";
  if (tool === "yarn") shell = "yarn build";
  exec(`${shell}`, (error) => {if (error !== null) {console.log(`exec error: ${error}`);
    }
  });
};

if (os.platform() === "win32") {notShellBuid();
} else {console.log(os.platform());
  shellBuild();}

以下是 shell 脚本的打包命令可展现打包时长

START_TIMER=$((`date '+%s'`*1000));

case $1 in 
npm)
  npm run build
;;
yarn)
  yarn build
;;
*)
  npm run build
esac



END_TIMER=$((`date '+%s'`*1000))
TIMER=$((($END_TIMER - $START_TIMER)/1000/60));
SECOND=$((($END_TIMER - $START_TIMER)/1000%60));

echo '构建工夫：'$TIMER'分钟'$SECOND'秒';

在 package.json scripts 对象中退出打包配置 “buildBy”: “node build/index.js”
以上步骤实现后在我的项目中增加配置新建文件 system.config.js 和 config.js
在 system.config.js 中退出以下代码

export const env = process.env;
import config from "./config";
export const envConfig =
  env.VUE_APP_SYS_ENV && config[env.VUE_APP_SYS_ENV] ? config[env.VUE_APP_SYS_ENV] : config.default;

而后在 config 文件中配置不同环境中的参数例如：

export default {
  default: {needBtn: false,},
  aa: {needBtn: true,},
};

最初在所须要的文件中引入 system.config.js 此文件即可

当咱们通过 npm run build 的时候读取的是 default 配置内容。当咱们执行 npm run buildBy aa 的时候读取的是 aa 配置内容