vue3+vite4项目打包一次同时生成两个dist文件(测试环境和生产环境)

最近开发时碰到一个需求，需要区分是开发环境、测试环境还是生产环境。因为直接在代码里判断过于冗余（好吧其实是我不知道如何在代码中直接判断是否是测试环境），因此在根目录下创建了三个.env文件。

配置环境变量

在项目根目录下建立三个.env文件，注意一定得是根目录下，因为我就曾犯过建在src目录下导致一直没生效的错误。

在根目录下分别建立.env.development、.env.test、.env.production，vite项目中前缀以VITE_开头的变量可以被识别，在代码中就可以通过import.meta.env[变量名]的方式获取到。例如我在开发环境中配置了VITE_USER_NAME，在代码中就可以通过import.meta.env.VITE_USER_NAME的方式取到该值。

然后在测试环境和生产环境以同一变量名赋值不同的值，在package.json中加入以下代码：

此时运行对应的打包命令，就可以生成带有不同环境变量的包。

一次命令生成两个包

因为某些特殊原因，我常常需要同时打测试环境和生产环境的包，但是每次这样操作都需要输入两个不同的命令，于是我就想是否能一次命令直接生成两个不同的包。 在node中有一个叫child_process的内置模块，允许从node中运行其他程序，并与这些程序交互。其中包含一个exec函数，将你要执行的命令或者执行的文件的路径当作第一个参数传入即可。在项目的根目录中添加文件build-both.js，在package.json中添加：

build-both.js

import { exec } from "child_process";
import fs from "fs";

// 定义打包命令
const buildProd = "vite build --mode production";
const buildTest = "vite build --mode test";

// 执行生产环境打包
console.log("Building for production...");
exec(buildProd, (err, stdout, stderr) => {
  console.log(stdout, stderr);
  if (err) {
    console.error("Production build failed", err);
    return;
  }
  console.log("Production build completed.");

  // 打包完成后，重命名dist文件夹
  fs.rename("dist", "dist_production", (err) => {
    if (err) {
      console.error("Failed to rename production dist", err);
      return;
    }

    console.log("Building for Test...");
    exec(buildTest, (err) => {
      if (err) {
        console.error("Test build failed", err);
        return;
      }
      console.log("Test build completed.");

      // 构建完成后，重命名dist文件夹
      fs.rename("dist", "dist_test", (err) => {
        if (err) {
          console.error("Failed to rename production dist", err);
          return;
        }
      });
    });
  });
});

当运行npm run build:both后，控制台出现 ，此时代表打包已完成。项目中会生成两个对应的打包文件：

打包过程中若出现如图所示的错误，，将正在运行的项目中止再重新打包即可。