一、说明
通常在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>
