Vue中.env文件的使用详解
更新时间：2024年11月06日 09:55:49 作者：A_bad_horse
在Vue项目开发中,.env文件用于配置不同环境（开发、测试、生产）的环境变量,通过不同的文件如.env.development和.env.production来区分环境配置,Vue会根据运行命令自动加载对应的配置文件,如使用npm run serve会加载.env.development
.env文件配置
Vue项目中，.env文件是运行项目时的环境配置文件。但是在实际开发过程中，有本地开发环境、测试环境、生产环境等，不同环境对应的配置会不一样。
因此，需要通过不同的.env文件实现差异化配置。
1. 文件说明
.env: 全局默认配置文件，所有环境(开发、测试、生成等）均会加载并合并该文件。
.env.development：开发环境的配置文件.env.production：生产环境的配置文件
注：
- 1. 以上三个文件的命名为固定格式，不能改变，否则读取不到文件。
- 2. .env文件在实际开发中可以省略，如果所有配置都写在对应的文件中。
2. 文件读取
Vue会根据启动命令自动加载对应的环境配置文件。
package.json会配置好相关的映射匹配。
2.1 npm run serve
development模式用于：vue-cli-service serve
- 模式将NODE_ENV的值设置为模式名称
# 开发环境配置 ENV = 'development'
- 通过.env文件增加后缀名来设置某个模式下的环境变量
对应的文件：.env.development
2.2 npm run build
production模式用于：vue-cli-service build
- 模式将NODE_ENV的值设置为模式名称
# 生产环境配置 ENV = 'production'
- 通过.env文件增加后缀名来设置某个模式下的环境变量
对应的文件：.env.production
2.3 npm run 自定义模式
// .env.staging "build:stage": "vue-cli-service build --mode staging", // .env.demo1024 "build:demo1024": "vue-cli-service build --mode demo1024",
3. 查看环境变量
nodejs顶层对象中prcess基础类下的process.env属性，返回包含用户环境的对象。
console.log(process.env)
以上命令即可直接打印当前环境变量。
4. 使用环境变量
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API + '/admin-api/', // 此处的 /admin-api/ 地址，原因是后端的基础路径为 /admin-api/
// 超时
timeout: 10000
})
.env.development
VUE_APP_BASE_API = '/dev-api'
.env.production
VUE_APP_BASE_API = '/prod-api'
实现了不同环境的动态配置。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue.js devtools遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了Vue项目如何关闭语法检查问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了element中的el-upload附件上传与附件回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue+jsplumb实现连线绘图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要给大家介绍了关于vue上传图片文件的相关资料，介绍了利用原始input标签form表单上传、elementui自带的el-upload上传以及elementui实现一次性上传多张图片等方法，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
在vue开发中,难免遇到各种表单校验,本文主要介绍了Vue中常用的rules校验规则的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要为大家详细介绍了vue实现简易计时器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要介绍了Vue打包后出现一些map文件的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论