vue通过mode参数动态执行vite环境变量

一、说明

通常在vue和vite项目中，若要使用环境变量，先需要在项目根目录下创建对应环境的 .env 文件，Vite 会根据 --mode 指定的模式自动加载对应文件。这种模式需要先设置对应的.env文件，如果变量值不确定，需要动态设置时，就有点有不太适用，是否可以解除.env文件的限制，通过--mode直接动态设置vite环境变量的值呢？

二、动态设置vite环境变量

1、增加setup.js文件，用于动态设置构建参数

文件目录：scripts/setup.js

/**
 * 动态环境参数脚本，用于设置环境变量并执行 vite 命令。
 * 用法: node scripts/setup.js dev -- PA
 *      node scripts/setup.js build -- PB
 * 构建：pnpm dev:exp -- PA     pnpm build:exp -- PA
 */
const { spawn } = require('child_process');
const path = require('path');

// 获取命令行参数
const args = process.argv.slice(2);
const command = args[0]; // dev 或 build
const envFlag = args[1]; // PA 或 PB 等

// 验证参数
if (!command) {
  console.error('错误: 请指定命令 (dev 或 build)');
  process.exit(1);
}

// 提取环境模式 (去掉前缀 --)
let mode = envFlag || 'dev'; //envFlag.slice(2);
// 根据命令构建 vite 命令
const viteCommand = 'vite';
let viteArgs;

// 设置环境变量
process.env.VITE_APP_MODE = mode;
if (command === 'dev') {
  viteArgs = ['--mode', mode];
} else if (command === 'build') {
  viteArgs = ['build', '--mode', mode];
} else {
  console.error(`错误: 不支持的命令 "${command}"`);
  process.exit(1);
}

console.log(`运行环境: ${mode}`);
console.log(`执行命令: ${viteCommand} ${viteArgs.join(' ')}`);

// 执行 vite 命令
const child = spawn(viteCommand, viteArgs, {
  stdio: 'inherit',
  shell: true,
  cwd: path.resolve(__dirname, '..'),
});

child.on('exit', code => {
  process.exit(code);
});

2、将vite环境变量注入到process.env(非必需)

由于本人使用的是process.env，所以需要在vite.config.ts中注入一下，通过 import.meta.env 访问环境变量，则不需要此步骤

import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    // 将环境变量注入到客户端代码
    define: {
      'process.env': JSON.stringify({
        NODE_ENV: process.env.NODE_ENV,
        ...env,
      }),
    },
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  };
});

3、在 package.json 的 scripts 中配置不同环境的命令

{
  "scripts": {
    "dev": "vite", 
    "dev:exp": "node scripts/setup.js dev",
    "build:exp": "node scripts/setup.js build",
  }
}

执行命令示例：

# 启动开发服务 并指定项目参数
pnpm dev:exp -- pA

# 打包代码，并指定项目参数
pnpm build:exp -- PA

# 启动默认服务 不指定项目参数
pnpm dev

程序运行结果：

三、在代码中使用环境变量

可以通过 process.env.VITE_APP_MODE 或 import.meta.env.VITE_APP_MODE; 来获取动态编译时设置的vite环境变量参数的值。

<template>
  <div>  
  </div>
</template>
<script lang="ts" setup>
const projectMode = process.env.VITE_APP_MODE; // 获取当前运行模式
console.log('projectMode', projectMode);
</script>