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