关于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 配置内容