nuxt和vite使用环境比变量对比

核心概念与加载机制对比

尽管 Nuxt 和 Vite 都遵循 "显式指定优先" 的原则，但它们在处理通用配置文件（如 .env）时，采取了本质上不同的策略。

Nuxt 与 Vite 的核心差异对比

特性	Vite (合并模式)	Nuxt (排他模式)
显式参数	`--mode <modeName>`	`--dotenv <filename>`
自动加载通用文件	总是加载 `.env` 和 `.env.local`	完全忽略 `.env` 和 `.env.local`
文件加载顺序	合并：最高优先级模式文件会覆盖通用文件	排他：使用 `--dotenv` 时，只加载指定文件
哲学	合并模式 (通用配置 + 模式配置)	排他模式 (只加载显式指定的文件)

环境变量加载机制

1. Nuxt 的加载机制（关键！）

Nuxt 的环境变量加载行为完全取决于是否使用了 --dotenv 参数。

场景 A: 使用 `--dotenv`（排他性加载）

当您运行 nuxt build --dotenv .env.prod 时：

Nuxt 只加载 您明确指定的配置文件： .env.prod。
它会完全忽略 所有其他文件，包括 .env.production、.env 和 .env.local。
nuxt build 自动设置的 NODE_ENV=production 仅影响代码优化级别 （如开启压缩），不会触发 .env.production 的加载。

场景 B: 未使用 `--dotenv`（自动查找模式）

当您运行 nuxt build 或 nuxt dev 时，Nuxt只会加载.env

2. Vite 的加载机制（合并性加载）

当您运行 vite build --mode staging 时：

Vite 总是会加载通用文件（.env 和 .env.local），并将模式特定文件（.env.staging）加载并合并。如果变量冲突，模式特定文件中的值将覆盖通用文件中的值。

Nuxt 最佳实践：推荐方案

推荐使用 --dotenv 进行排他性加载，以确保清晰、跨平台且一致的行为。

方案：只使用 `--dotenv`

此方案完全跨平台，无需额外的 cross-env 依赖。

文件命名：

复制代码

.env.dev
.env.staging
.env.prod

环境文件中的变量以NUXT_PUBLIC_开头才会同时暴扣给服务端和客户端，在代码中用useRuntimeConfig()访问

package.json 脚本：

JSON

json 复制代码

{
  "scripts": {
    "dev": "nuxt dev --dotenv .env.dev",
    "build:staging": "nuxt build --dotenv .env.staging",
    "build:prod": "nuxt build --dotenv .env.prod"
  }
}

配合 `nuxt.config.ts` 中的 `$env` 配置

Nuxt 内置的 c12 库允许您在配置文件中通过 $production 或 $staging 键直接为不同环境配置 Nuxt 特性（如模块、路由规则等）。

如果您使用自定义的环境名（例如 $staging），并希望同时使用变量加载 和 配置块启用 ，您需要手动设置 NODE_ENV 来激活配置块：

JSON

json 复制代码

{
  "scripts": {
    "build:staging": "cross-env NODE_ENV=staging nuxt build --dotenv .env.staging"
  }
}

--dotenv .env.staging ：负责加载您的 API 密钥等字符串变量。
cross-env NODE_ENV=staging ：负责启用 nuxt.config.ts 文件中的 $staging 配置块。

注意： cross-env 是为了解决 Windows 平台不支持 NODE_ENV=... 语法的问题。如果您只使用 --dotenv 而不依赖 $env 配置块，则不需要 cross-env。

Vite方案

vite配置就比nuxt简单一些，只需在脚本配置模式(mode)就可以了

bash 复制代码

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

css 复制代码

vite build --mode staging

环境变量以VITE_开头才会暴漏出去。代码中使用import.meta.env访问