环境变量与模式

Vite 内置环境变量

import.meta.env.BASE_URL:
- 开发环境中，默认值通常是 '/'
- 生产环境中，这个值可以根据 vite.config.js 文件中的 base 配置项进行设置
import.meta.env.MODE：获取当前应用运行的模式
import.meta.env.PROD：应用是否运行在生产环境
import.meta.env.DEV：应用是否运行在开发环境
import.meta.env.SSR：应用是否运行在 server 上

NODE_ENV

代码运行有不同的环境，不同的环境，需要不同的配置来满足需求。

一般可以通过 NODE_ENV 这个环境变量，该变量可以指定代码的运行环境，比如 development、production 或 test

模式

在 Vite 中，模式是一个可以在启动时设置的属性，用来指导 Vite 如何加载 .env 文件

.env 的文件用来存放环境变量，之后在客户端源码中就可以通过 import.meta.env 来访问对应的值

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

text

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

例如，我们可以在 .env.development 和 .env.production 文件中定义不同的环境变量，在使用 Vite 启动应用的时候可以指定对应的模式加载对应的 .env 文件。

之后使用 Vite 启动应用的时候，就可以指定特定的模式，从而加载不同的 .env 文件

shell

# 开发环境
vite --mode development

# 生产环境构建
vite build --mode production

思考🤔：为什么有了 NODE_DEV 还需要 mode 模式？

答案：NODE_DEV 是在 Node.js 环境中最早被支持的一个环境变量，广泛的被用于各大工具和库。而模式是特定于某个构建工具，主要就是用于更加细粒度的场景控制。也就是说，使用 mode 可以在不影响 NODE_DEV 的前提下具备更高的灵活性。

情景配置

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

在配置解析时，vite是默认不加载.env文件的，因为配置中可能存在影响加载的项。

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
    const env = loadEnv(mode, process.cwd(), '')
    return {
        // vite 配置
        define: {
            __APP_ENV__: env.APP_ENV
        }
    }
})

环境变量与模式 ​

环境变量与模式