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'
实现了不同环境的动态配置。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue组件的实现原理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了实现一个VUE响应式属性装饰器详析，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便，这篇文章主要介绍了vue中或者react中的excel导入和导出,需要的朋友可以参考下2023-09-09
本文详细讲解了vue3获取当前路由地址的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
vue项目中销毁window.addEventListener事件监听解析
这篇文章主要介绍了vue项目中销毁window.addEventListener事件监听，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue中使用Ueditor的方法，本文通过实例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
计算属性就是模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。这篇文章主要介绍了vue计算属性详解,需要的朋友可以参考下2018-04-04
本篇文章主要介绍了Vuex 模块化(module)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论