在Vue 项目中，进行多环境配置是一个常见需求，主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。以下是一个基于Vue CLI创建的项目如何进行多环境配置的基本步骤：
1. 创建环境变量文件
在项目的根目录下，创建.env文件族，如.（本地开发环境）、.（开发环境）、.（测试环境）、.（生产环境）。Vue CLI会自动根据当前的模式加载对应的配置文件。
2. 在环境文件中设置变量
在每个.env文件中，定义所需的环境变量，例如：
-
# .
-
VUE_APP_API_URL=http://
注意，环境变量的名称必须以VUE_APP_开头，这是Vue CLI识别环境变量的前缀。
3. 在项目中使用环境变量
在代码中，你可以通过.VUE_APP_API_URL来访问上面定义的环境变量。
4. 使用`vue-cli-service`命令行工具构建项目
在不同的环境下，你可以使用不同的命令来构建项目，例如：
-
# 开发环境
-
vue-cli-service build --mode development
-
-
# 生产环境
-
vue-cli-service build --mode production
5. 配置中的脚本
为了简化构建过程，你可以在``中的`scripts`部分配置相应的脚本命令：
-
"scripts": {
-
"serve": "vue-cli-service serve",
-
"dev": "vue-cli-service serve --mode development",
-
"prod": "vue-cli-service serve --mode production",
-
"build:dev": "vue-cli-service build --mode development",
-
"build:prod": "vue-cli-service build --mode production"
-
}
这样就可以使用npm run build:dev或npm run build:prod来进行环境指定的构建。
-
//运行
-
npm run dev
-
-
npm run prod
-
-
//打包
-
npm run build:dev
-
-
npm run build:prod
6. 使用环境变量
const apiUrl = process.env.VUE_APP_API_URL;