.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生成环境。

当然，我们也可以自己进行设置,比如: