一：是什么

1：定义：根据当前代码环境变化的变量叫做环境变量

// webpack.config.js
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

2：说明：process.env.NODE_ENV就是一个环境变量

3：分类：一般分为生成环境和开发环境

4：宿主：环境变量的识别，是由浏览器端进行的，由浏览器根据不同环境变量进行不同逻辑

二：如何使用

1：定义：vite主要是用特殊的 import.meta.env 对象上暴露环境变量

2：参数：

import.meta.env.MODE: {string} 应用运行的模式。

import. meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定。

import. meta.env.PROD: {boolean} 应用是否运行在生产环境。

import. meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上

3：注意：vite.config.js中无法访问

三：拓展

1：加载方式

.env                     # 所有情况下都会加载

.env.[mode]         # 只在指定模式下加载

npm run dev 会加载 .env 和 .env.development 内的配置

npm run build 会加载 .env 和 .env.production 内的配置

2：识别方式：

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

四：进阶

1：加载自定义的.env文件，直接配置命令

"scripts": {
    "test": "vite --mode test",
    "dev": "vite",
    "build": "vite build"
  },

2：更改.env默认地址

创建envDir文件目录，用来加载.env文件，可以是绝对路径，也可以是相对路径

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

3：更换环境变量VITE_前缀

使用envPrefix配置，envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中