介绍
通过环境变量传参，可以在不修改代码的情况下，加载不同的配置
作用
环境文件（.env系列）本质是一套多环境配置管理方案
- 区分运行模式：开发、测试、正式环境，一套代码，不同配置
- 集中管理常量：接口地址、页面标题、功能开关、第三方key统一放文件，不用到处改代码
- 隔离公私配置：公共配置提交git；本地私有配置（
.local）不上传git，每个人本机可自定义 - 避免硬编码：不要把接口地址写死在业务代码，改环境文件即可切换环境
- 配合打包脚本：执行不同命令自动加载对应配置，不用手动改代码
底层原理
Vite构建时读取.env文件，把VITE_*变量静态替换进代码，打包后变成真实字符串。
应用场景
场景1：多环境接口地址切换（最常用）
前后端开发联调、测试服务器、线上正式服务器 接口地址不一样
- 开发环境：
http://127.0.0.1:8080 - 测试环境：
https://api-test.xxx.com - 生产环境：
https://api.xxx.com
场景2：功能开关控制
不同环境开启/关闭某些功能
- 开发开启打印日志
- 显示调试面板
- 开启mock模拟数据
场景3：页面标题、项目版本、版权信息
不同环境展示不同标题，区分环境方便测试人员识别当前是哪个包
场景5：自定义测试环境 build:test
后端有一套独立测试服务器，需要打测试包给测试人员，不改动正式环境配置。
场景6：本地开发人员个性化配置
工程师A本地后端端口是8081，工程师B是8082。
场景7：第三方前端公共密钥配置
前端可暴露的key（如地图AK、埋点id），放到环境变量统一管理。
注意： 不要放后端密钥、数据库密码
不该用环境文件的情况
后端密钥、数据库密码、token密钥：禁止，因为前端会泄露。这类配置放在后端服务。
运行时动态变化的参数：比如用户登录后获取的用户配置，不要写环境变量。env是构建期确定，打包完成后不能修改。
配置文件名称
文件的文件名必须按下面方式命名，不能乱起名，否则读取不到文件：
.env：全局默认配置文件，无论什么环境都会加载合并。.env.development：开发环境的配置文件.env.production：生产环境的配置文件
内容格式
属性名必须以 VUE_APP_ 开头，如：
VUE_APP_BASE_API = '/dev-api'
加载
vue 会根据 启动命令 自动加载 相对应的环境配置文件。
开发环境
开发环境加载 .env 和 .env.development 。
使用 npm run serve 命令
生产环境
生产环境加载 .env 和 .env.production 。
使用 npm run prod 命令
优先级
环境配置文件 > 全局配置文件
当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项
项目中的使用
在配置文件中定义的属性，可通过下面代码方法
process.env.xxx
例子：
process.env.VUE_APP_BASE_API
例子
.env
默认配置
NODE_ENV = production
VUE_APP_ENV = ''
.env.development
使用 npm run serve 会合并 .env 文件，.env.development 文件的配置
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
.env.production
使用 npm run prod 会合并 .env 文件，.env.prod 文件配置
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = '/prod-api'