配置环境变量

1. 创建基本的.env文件

    1. 在项目根目录(与package.json同级)创建一个名为.env的文件
    1. 在文件中添加环境变量,格式为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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容