在Vue 项目中,进行多环境配置是一个常见需求,主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。以下是一个基于Vue CLI创建的项目如何进行多环境配置的基本步骤:
1. 创建环境变量文件
在项目的根目录下,创建.env
文件族,如.env.local
(本地开发环境)、.env.development
(开发环境)、.env.test
(测试环境)、.env.production
(生产环境)。Vue CLI会自动根据当前的模式加载对应的配置文件。
2. 在环境文件中设置变量
在每个.env
文件中,定义所需的环境变量,例如:
# .env.development
VUE_APP_API_URL=http://dev.api.example.com
注意,环境变量的名称必须以VUE_APP_
开头,这是Vue CLI识别环境变量的前缀。
3. 在项目中使用环境变量
在代码中,你可以通过process.env.VUE_APP_API_URL来访问上面定义的环境变量。
4. 使用`vue-cli-service`命令行工具构建项目
在不同的环境下,你可以使用不同的命令来构建项目,例如:
# 开发环境
vue-cli-service build --mode development
# 生产环境
vue-cli-service build --mode production
5. 配置package.json中的脚本
为了简化构建过程,你可以在`package.json`中的`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;