在前端开发中，环境变量配置是一种将应用程序与特定环境（如开发、测试、生产）进行关联的方式。通过配置环境变量，可以在不同环境中使用不同的配置值，例如 API 地址、密钥、调试标志等。
下面是一般情况下，在前端项目中配置环境变量的步骤：
1. 创建环境变量文件：在项目根目录下创建一个环境变量文件，通常以 .env 文件名开头，后缀根据具体的开发框架而定（例如.env.development、.env.production等）。
2. 设置环境变量：在环境变量文件中，可以为不同的变量设置不同的值。
REACT_APP_API_URL=http://api.example.com
REACT_APP_API_KEY=your-api-key
3. 引用环境变量：在代码中，可以使用预定义的变量名来引用环境变量的值。具体的语法与开发框架有关。
4. 使用不同环境的变量：根据当前的开发环境，选择使用不同的环境变量文件。例如，在开发环境下，使用.env.development文件；在生产环境下，使用.env.production文件。这通常需要通过构建工具（如Webpack、Parcel）来完成。
5、配置不同环境打包命令：
在package.json中，你可以配置不同环境下的打包命令。例如，在scripts字段中添加以下配置：
"scripts": {
"serve": "vue-cli-service serve",
"build:development": "vue-cli-service build --mode development",
"build:production": "vue-cli-service build --mode production"
}
在上面的配置中，我们定义了两个不同的打包命令build:development用于开发环境，build:production用于生产环境。使用--mode选项来指定不同的环境。
使用命令行执行打包命令时，例如npm run build:development，会根据指定的环境打包生成对应环境的版本。
