vite打包时通过.env在不同的模式下传递不同环境变量数据

首先需要知道以下几点：

1. 通过“import.meta.env.具体变量名”访问.env文件中的环境变量

正确方式： import.meta.env.VITE_APP_TITLE
错误方式： import.meta.env[key]

2. .env文件中的环境变量必须以VITE_为前缀，否则无法引用成功

正确方式： VITE_APP_TITLE = 'vite'
错误方式： TE_WORD = 123

3. .env开头不同的文件类型加载不同的环境变量，如：

• .env 所有情况下都会加载

• .env,local 所有情况下都会加载，但被git忽略

• .env.[mode] 只在对应模式加载

• .env.[mode].local 只在对应模式加载，但被git忽略

要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题：

1. 先在项目根目录下创建三个.env文件对应三个环境变量

.env.development 下：

# 开发环境配置
VITE_APP_TITLE = '开发标题'

.env.test下：

# 测试环境配置
VITE_APP_TITLE = '测试标题'

.env.staging下：

# 生产环境配置
VITE_APP_TITLE = '生产标题'

2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式

{
"scripts": {
    "dev": "vite",
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging",    //对应生产标题
    "build:test": "vite build --mode test",        //对应测试标题
    "build:dev": "vite build --mode development",  //对应开发标题
    "preview": "vite preview"
  },
}

3. 使用：

const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)

附vite官网介绍供大家参考