前端项目环境变量如何配置？

我们在项目开发过程中，至少会经历开发环境、测试环境和生产环境三个阶段。不同阶段请求的状态（如接口地址等）不尽相同，若手动切换接口地址是相当繁琐切容易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
开发环境——development
测试环境——testing
生产环境——production
一般情况下，一个环境对应一台服务器，也有的公司开发与测试环境是同一台服务器！
项目根目录分别添加开发、生产和测试环境的文件！

.env.development
.env.production
.env.test

分别配置三个环境变量

1. .env.development

NODE_ENV = 'development'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/dev-api'

2. .env.production

NODE_ENV = 'production'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/prod-api'

3. .env.test

NODE_ENV = 'test'
VITE_APP_TITLE = '运营平台'
VITE_APP_BASE_API = '/test-api'

package.json中配置运行命令

 "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "build:test": "vue-tsc && vite build --mode test",
    "build:prod": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
}

获取环境变量:
在组件中直接打印就可以获取到当前环境变量了。
如执行npm run serve命令，会自动加载.env.development文件

console.log(import.meta.env)