环境变量

根据当前的代码环境变化的变量就叫做环境变量。我们可以设置生产环境和开发环境的 base_url，来请求不同环境的接口。

运行环境

node.js —— process.env

process.env是 Nodejs 提供的 API，其返回一个对象，包含了当前 Shell 的所有环境变量。

vite.config.js 运行在 node 环境中，所以可以识别process.env变量，而process.env.NODE_ENV就是当前 Node 运行环境变量。

浏览器环境 —— import.meta.env

在浏览器环境中，Vite 在一个特殊的import.meta.env 对象上暴露环境变量。

这些变量在 vite.config.js 中无法访问到的。

自定义环境变量

dotenv

vite 中内置了 dotenv，dotenv 会从环境目录下自动读取.env 文件：

.env：默认所有环境都会加载
.env.[mode]：只在指定模式下加载

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

注：所以在其中不用写""也行。

在指定模式下运行时，.env 在 .env.[mode] 中的同名变量会被 .env.[mode] 覆盖，而其他变量则会被进行合并。

指定运行模式（运行加载的自定义环境变量文件）

运行命令时以 –mode 参数指定运行模式，如：

"scripts": {
  "dev": "vite", // 默认开发模式 development
  "build": "vite build", // build 默认为生产模式
  "test": "vite --mode test"
},

指定的--mode xxx会去寻找对应的.env.xxx 文件，并在浏览器中将import.meta.env设置为 xxx 模式。如果没有找到这个文件，则只加载.env中的环境变量。

注意：自定义模式（test）和设置的.env.xxx（.env.test）只在 vite 经过处理的浏览器端生效，Nodejs 是不会承认它的，也就是说只能在使用import.meta.env时才能读取到自定义环境变量，而 process.env.NODE_ENV 中没有，并且通过loadEnv()方法也只能获取到开发环境和生产环境。（测试了一下即使在浏览器中 MOED=test，但是process.env.NODE_ENV还是 development）

更改.env 文件的默认入口地址

一般来说 .env 文件都是建立在根目录下的，但如果环境文件太多，都散落在根目录下会让目录变得混乱。

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

这样所有的文件都可以放在根目录下的 env 文件夹下。

更改环境变量的 VITE_前缀

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

import { defineConfig } from "vite";
export default defineConfig({
  envPrefix: "FER",
});

获取所有的环境变量

vite.config.js 中的环境变量获取默认以设置的 envPrefix 为开头，可以使用 Vite 内置的 API 方法loadEnv()获取所有的环境变量：

const env1 = loadEnv(process.env.NODE_ENV, process.cwd() + "\\env", ""); // 将所有的配置文件放在 env 文件夹下，这样能获取到 node 环境中(env)的所有变量
const env2 = loadEnv(process.env.NODE_ENV, process.cwd() + "\\env"); // 默认获取到以 VITE\_ 开头的环境变量
const env3 = loadEnv(process.env.NODE_ENV, process.cwd() + "\\env", "FER_"); // 获取到以 FER\_ 开头的环境变量

• ""：表示需要获取的环境变量的前缀，默认为 VITE_开头。
• 对于不同的 NODE_ENV，只会获取对应模式（只有 production 和 development）的环境变量。