vite打包命令 如何通过npm run build来传递不同的参数

需求背景
有一个项目，是基于vue3和vite的。有一个需求：在A环境上通过build打包出来的代码，不需要展示“批量导出”的功能，而在B环境上通过build打包出来的代码，需要展示“批量导出”的功能。我不想每次打包的时候，都手动的去修改展示“批量导出”与否的标志位这种业务代码，而是想通过打包命令或者一些配置，能够通过不同的打包命令，来实现此功能。其中A环境是指production生产环境、B环境是指test测试环境。

解决办法
1.创建环境文件
在 Vue 3 和 Vite 中，可以使用环境文件来定义不同环境的变量。通常，环境文件放置在项目的根目录，格式为 .env.[mode]，如 .env.production 和 .env.development。因此，考虑新增加一个.env.test文件

// .env.test文件

# 是否在打包时放开：事件检索———批量导出的功能
# 测试环境允许导出
VITE_SHOW_BATCH_EXPORT = 'true'

其中开发环境的配置文件.env.development和生产环境的配置文件 .env.production也做出相应的调整，如下：

// .env.development文件

# 是否在打包时放开：事件检索———批量导出的功能
# 开发环境允许导出，方便调试
VITE_SHOW_BATCH_EXPORT = 'true'

// .env.production文件

# 是否在打包时放开：事件检索———批量导出的功能
# 生产环境不允许导出
VITE_SHOW_BATCH_EXPORT = 'false'

2. 配置打包命令
   通过修改 package.json 中的打包脚本，分别为 A 和 B 环境设置不同的构建命令。例如：

{
  "scripts": {
    "build:a": "vite build --mode a",
    "build:b": "vite build --mode b"
  }
}

应用到此需求中，即为：

"scripts": {
   "dev": "vite",
   "build": "vite build",
   "build:test": "vite build --mode test",
 },

说明：此处是仅增加了一个build:test命令。

3. 在代码中使用环境变量

<template>
  <div>
    <button v-if="showBatchExport">批量导出</button>
  </div>
</template>

<script setup>
const showBatchExport = import.meta.env.VITE_SHOW_BATCH_EXPORT === 'true';
</script>

4. 执行打包命令
   在生产环境中打包：

npm run build

在测试环境中打包

npm run build:test