| 操作 | Vue 3 | Vue 2 |
|---|---|---|
| 设置全局环境变量 | 在 .env 文件中定义 | 在 config/dev.env.js 中定义 |
| 设置指定模式下的环境变量 | 在 .env.[mode] 文件中定义 | 在 config/prod.env.js 中定义 |
| 设置开发环境环境变量（development mode） | .env.development | config/dev.env.js |
| 设置生产环境环境变量（production mode） | .env.production | config/prod.env.js |
| 设置测试环境环境变量（test mode） | .env.test | config/test.env.js |
| 在代码中引用全局环境变量 | 使用 import.meta.env 对象 | 使用 process.env 对象 |
| 在代码中引用指定模式下的环境变量 | 使用 import.meta.env.MODE_{variableName} 对象 | 使用 process.env.{variableName} 对象 |
| 在代码中引用开发环境环境变量 | 使用 import.meta.env.DEV_{variableName} 对象 | 使用 process.env.{variableName} 对象 |
| 在代码中引用生产环境环境变量 | 使用 import.meta.env.PROD_{variableName} 对象 | 使用 process.env.{variableName} 对象 |
| 在代码中引用测试环境环境变量 | 使用 import.meta.env.TEST_{variableName} 对象 | 使用 process.env.{variableName} 对象 |
| 在模板中引用全局环境变量 | 使用 $ 符号 | 使用 $ 符号 |
| 在模板中引用指定模式下的环境变量 | 使用 $MODE_{variableName} 符号 | 使用 $${variableName} 符号 |
| 在模板中引用开发环境环境变量 | 使用 $DEV_{variableName} 符号 | 使用 $${variableName} 符号 |
| 在模板中引用生产环境环境变量 | 使用 $PROD_{variableName} 符号 | 使用 $${variableName} 符号 |
| 在模板中引用测试环境环境变量 | 使用 $TEST_{variableName} 符号 | 使用 $${variableName} 符号 |
总体来说，Vue 3相比Vue 2更加简洁方便，只需要在.env文件中定义全局环境变量即可，在代码中引用时直接使用import.meta.env对象即可。同时，在Vue 3中，引入了针对不同模式的环境变量以及更多的语法糖，更加方便开发者使用。
