.env文件介绍

今天来给大家介绍一下.env 文件的使用

小编作为前端开发的医院，今天来给大姐介绍一下.env 文件的使用

目前市面上流行的前端主流框架主要是vue 和react 这两种框架

vue/cli 项目创建的框架模式使用webpack 创建的框架

create-react-app 的项目框架默认也是使用 react创建的框架

目前市面上除了webpack 之外还有 vite 这个构建工具

本文小编主要讲解 .env 文件 的使用 首先我们需要知道.env文件是用来管理我们的环境变量的文件

作为一个前端开发工程师，在项目中我们的环境 主要分为 开发环境 测试环境 生产环境

在vue中.env 文件的配置

.env : 全局默认配置文件，无论什么环境都会加载合并

.env.development :开发环境的配置文件

.env.production 生产环境的配置文件

.env.test 测试环境的配置文件

需要注意的是：前三个文件的文件名必须按照上面的方式进行命名，否则读取不到文件

内容格式

NODE_ENV=production
VUE_APP_BAIDU_URL=https://www.baidu.com
VUE_APP_VARIABLE_XXX= '66666'

NODE_ENV 通常这个变量用来区分开发和生产环境的配置，

注意，在vue中属性名必须以VUE_APP_ 开头 例如：VUE_APP_XXX

加载，Vue会根据启动命令自动加载相对应的环境配置文件

开发环境加载 .env 和.env.development

生产环境加载 .env 和 .env.production

测试环境加载 .env和 .env.test

优先级

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同的配置项是，环境的配置项会覆盖全局的配置项目

使用

在项目中可以通过 process 对象 获取 process 对象是一个全局变量 踢狗相关信息 控制当前node.js 进程

可以使用 process.env.xxx 来访问属性

例子

vue.config.js
process.env.NODE_ENV            // test
process.env.VUE_APP_BAIDU_URL         // https://www.baidu.com
process.env.VUE_APP_VARIABLE_XXX         // '66666'

.env.test文件

NODE_ENV=test
VUE_APP_BAIDU_URL