vite 4 使用 .env.xxx文件在项目根目录下创建一个名为 .env.development 的文件。在该文件

在项目根目录下创建一个名为 .env.development 的文件。
在该文件中添加要设置的环境变量，例如：VITE_APP_TITLE=My App (Development)。
在 Vite 配置文件（通常是 vite.config.js）中引入 dotenv 包并调用 config() 方法来加载环境变量。例如：

import path from 'path'
import dotenv from 'dotenv'
// 使用 .env 文件来设置环境变量
const { parsed: env } = dotenv.config({
  path: '.env.' + process.env.NODE_ENV
})

在运行 npm run dev 命令时，就会自动加载 .env.development 文件；在运行 npm run build 命令时，就会自动加载 .env.production 文件。假如需要其他环境的.env.xxx，比如预发布.env.release，需要在 npm script 中指定环境名称

"dev": "vite",
"build:test": "vue-tsc && NODE_ENV=test vite build",
"build:release": "vue-tsc && NODE_ENV=release vite build",
"build": "vue-tsc && vite build",

注意，在使用 dotenv 加载 .env 文件时，不需要在 define 中手动设置环境变量，因为它们会自动注入到 import.meta.env 对象中。在.env.xxx必须以 VITE_ 开头(vite 默认)的环境变量才会通过 import.meta.env 暴露在你的客户端源码中。如果需要更改开头，可以在vite.config.js 文件中的 envPrefix配置，例如

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  /*以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
   *在.env.文件命名必须以 VITE_ 或者 VUE_ 前缀开头
   */
  envPrefix: ['VITE_', 'VUE_'],
})

import.meta是一个JavaScript元属性（Meta Property），用于访问模块相关的元数据。它可以用来获取模块的URL、导入和导出列表等信息。

如果不想在import.meta.env访问环境变量，可以把dotenv.config返回的对象中的parsed属性注入到vite.config.js 文件中的 define配置，在代码中可以使用process.env.xxx访问环境变量，例如

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'
import dotenv from 'dotenv'
// 使用 .env 文件来设置环境变量
const { parsed: env } = dotenv.config({
  path: '.env.' + process.env.NODE_ENV
})
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {
      NODE_ENV: process.env.NODE_ENV,
      ...env
    }
  }
});