1. 创建基本的.env文件
- 在项目根目录(与package.json同级)创建一个名为.env的文件
- 在文件中添加环境变量,格式为KEY=VALUE
# .env - 所有环境通用配置
VUE_APP_BASE_URL=http://localhost:3000
VUE_APP_API_VERSION=v1
2. 创建不同环境的配置文件
为了区分开发环境和生产环境,可以创建多个.env文件:
.env.development:开发环境专用配置(npm run serve时使用)
.env.production:生产环境专用配置(npm run build时使用)
3. 文件优先级
当存在多个.env文件时,Vue CLI会按照以下优先级加载:
.env.[mode].local:本地覆盖,会被git忽略
.env.[mode]:特定模式的环境变量
.env.local:本地覆盖,会被git忽略
.env:默认环境变量
4. 添加.gitignore保护敏感信息
确保.env.local和.env.[mode].local文件已经在.gitignore中,避免将敏感信息(如API密钥)提交到代码仓库:
# 在.gitignore中添加
.env.local
.env.*.local
5. 使用环境变量
创建完成后,你可以在项目中这样使用:
// 在axiosHttp.js中(已实现)
const baseURL = process.env.VUE_APP_BASE_URL;
// 在组件中
console.log(process.env.VUE_APP_API_VERSION);