.env文件详解(vite项目全局配置文件)
.env文件是一个用于存储环境变量的文件。在开发和部署应用程序时，经常需要在不同的环境中配置不同的变量，例如 API 地址、数据库连接信息、密钥等。在许多应用程序中，.env 文件通常包含一个或多个键值对，用于存储环境变量。
Vite 中的 .env 文件还可以用于配置构建时的变量
需要注意的是，Vite 中的环境变量必须以 VITE_ 前缀开头才能被识别。例如，如果您在 .env 文件中定义了一个名为 API_URL 的变量，它将不会被 Vite 识别。您应该将其命名为 VITE_API_URL。
此外，需要将 .env 文件放置在项目根目录下，并且只能包含键值对，例如：
VITE_API_URL=https://api.example.com
VITE_GLOB_APP_TITLE =YingSide_Demo
关于.env文件的规范，在vite官方文档中有具体说明:环境变量和模式
创建.env相关文件
大多数情况下，我们在项目中创建.env文件，都会是下面的形式
.env # 所有情况下都会加载
.env.[mode] # 只在指定模式下加载
[mode]指定的是具体模式，所以，一般对于开发，生产和测试环境，都会指定具体的环境
.env
.env.development
.env.production
.env.test
(1).env文件
# 所有环境都会加载
# title
VITE_GLOB_APP_TITLE = YingSide_DEMO
# 本地运行端口号
VITE_PORT = 3000
# 启动时自动打开浏览器
VITE_OPEN = true
(2).env.development文件
# 只在开发环境加载
VITE_USER_NODE_ENV = development
# 打包时是否删除 console
VITE_DROP_CONSOLE = true
# 公共基础路径
VITE_PUBLIC_PATH = /
# 开发环境接口地址
VITE_API_URL = /api
# 开发环境跨域代理，可配置多个
VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/6453b964af3bc37f99a23916"]]
(3).env.production文件
# 只在生产环境加载
VITE_USER_NODE_ENV = production
# 公共基础路径
VITE_PUBLIC_PATH = /
# 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
# Optional: gzip | brotli | none
VITE_BUILD_COMPRESS = none
# 打包压缩后是否删除源文件
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
# 打包时是否删除 console
VITE_DROP_CONSOLE = true
# 是否启用图片压缩
VITE_USE_IMAGEMIN = true
# 线上环境接口地址
VITE_API_URL = "http://www.yanhongzhi.com"
(4).env.test文件
# 测试环境
VITE_USER_NODE_ENV = test
# 公共基础路径
VITE_PUBLIC_PATH = /
# 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
# Optional: gzip | brotli | none
VITE_BUILD_COMPRESS = none
# 打包压缩后是否删除源文件
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
# 打包时是否删除 console
VITE_DROP_CONSOLE = true
# 测试环境接口地址
VITE_API_URL = "http://www.yanhongzhi.com"
每个.env文件无非也就是规定一些环境变量，所以都大同小异。目的也很简单，你可以认为其实就是定义了一些全局变量。根据自己项目的具体需要进行配置即可。
切换环境
不是配置了不同环境的文件吗？怎么确定当前是什么环境？很简单，答案就在package.json文件中
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
//....
}
默认的npm run dev和npm run build就分别对应development开发环境和production生成环境。
当然，我们也可以自己进行设置,比如:
原文地址：https://blog.csdn.net/anxin_wang/article/details/142357867
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！