Nuxt 中区分不同开发环境的环境变量

点正
581 阅读3分钟

先说明官方的话 .env 类的文件应添加到你的.gitignore 文件，以避免将 secret 后端的密钥推送到你的仓库。

除了任何进程环境变量之外，如果你的项目根目录中有一个文件，它将在 dev、build 和 generate 时自动加载 .env。在那里设置的任何环境变量都可以在您的文件和模块中访问。

意思是自动加载env环境，无论build 还是dev环境

  1. .env 文件的作用
    • 在项目根目录下创建 .env 文件，用于存储环境变量（如 API 密钥、后端地址等）。
    • 这些变量会在以下阶段自动加载：
      • 开发时（dev）
      • 构建时（build）
      • 生成静态页面时（generate）
  2. 环境变量的访问范围
    • 加载后的变量可以在以下位置访问：
      • nuxt.config.js 配置文件
      • 项目中的其他模块（Module）
      • 页面组件（如 .vue 文件）

示例：.env 文件内容

一般以NUXT_开头可以直接替换nuxt。conifg.ts中文件
API_BASE_URL=https://api.example.com
APP_TITLE=My Nuxt App

如何在 nuxt.config.js 中使用这些变量

在 nuxt.config.js 中，可以通过 process.env 直接访问 .env 文件定义的变量：

export default {  
// 配置应用标题（从 .env 中读取）  
head: {    
title: process.env.APP_TITLE || 'Default Title',  },  
// 配置 axios 模块（从 .env 中读取 API 地址）  
modules: ['@nuxtjs/axios'],  
axios: {    baseURL: process.env.API_BASE_URL,  },  
// 其他配置...}

注意事项

  1. 敏感变量安全

    • 不要将 .env 文件提交到版本控制（需在 .gitignore 中添加 .env）。
    • 生产环境的环境变量应通过服务器配置（如 Docker、PM2、CI/CD）注入，而非依赖本地文件。

  2. 变量命名规范

    • 通常使用全大写字母和下划线（如 API_KEY），以区分普通变量。

  3. 覆盖优先级

    • 如果系统环境变量（如 export API_BASE_URL=xxx）和 .env 文件冲突，系统环境变量优先级更高。

常见问题

  • 问题：修改 .env 后不生效？
    • 重启 Nuxt 开发服务器（npm run dev），因为环境变量仅在启动时加载。
  • 问题：变量在浏览器端暴露？
    • 以 NUXT_ENV_ 开头的变量或 publicRuntimeConfig 中的变量会被编译到客户端代码，避免在此存储敏感信息。

总结

  • .env 文件 是 Nuxt.js 管理环境变量的便捷方式，自动在开发/构建阶段加载。
  • nuxt.config.js 中通过 process.env.VAR_NAME 直接访问。
  • 生产环境建议通过服务器注入变量，而非依赖文件。

在 Nuxt 中区分不同开发环境的环境变量，推荐的做法如下：

  1. 使用 .env 文件（开发/构建阶段）
    Nuxt CLI 在开发（nuxi dev）、构建（nuxi build）和生成（nuxi generate）时会自动加载项目根目录下的 .env 文件。你可以为不同环境准备不同的 .env 文件（如 .env.local、.env.production），并通过 --dotenv 参数指定加载哪个文件。例如：

    npx nuxi dev --dotenv .env.local
npx nuxi build --dotenv .env.production

    .env 文件内容示例：

    NUXT_PUBLIC_API_BASE=https://api.dev.example.com
NUXT_API_SECRET=dev_secret

  2. 在 nuxt.config.ts 中配置 runtimeConfig
    在 nuxt.config.ts 里通过 runtimeConfig 统一声明环境变量，并用 NUXT_ 前缀的环境变量进行覆盖。示例：

    export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // 可被 NUXT_API_SECRET 覆盖
    public: {
      apiBase: '', // 可被 NUXT_PUBLIC_API_BASE 覆盖
    }
  }
})

    这样你可以在代码中通过 useRuntimeConfig() 获取变量：

    const config = useRuntimeConfig()
console.log(config.public.apiBase)

  3. 生产环境变量的设置
    注意：生产环境下，Nuxt 不会读取 .env 文件。你需要通过部署平台（如 Vercel、Netlify、云服务器等）提供的方式设置环境变量，或在启动服务时通过命令行传递：

    NUXT_PUBLIC_API_BASE=https://api.prod.example.com node .output/server/index.mjs

  4. 根据环境动态配置
    你也可以在 nuxt.config.ts 里根据 process.env.NODE_ENV 或 Nuxt 的环境覆盖功能，动态设置不同环境的配置。例如：

    export default defineNuxtConfig({
  $production: {
    runtimeConfig: {
      public: {
        apiBase: 'https://api.prod.example.com'
      }
    }
  },
  $development: {
    runtimeConfig: {
      public: {
        apiBase: 'https://api.dev.example.com'
      }
    }
  }
})

    通过 nuxi build --envName production 或 --envName development 指定环境构建Nuxt Configuration。

总结：

  • 开发/构建时用 .env 文件，生产环境用平台环境变量。
  • 变量名需用 NUXT_ 前缀（如 NUXT_PUBLIC_），并在 runtimeConfig 中声明。
  • 通过 useRuntimeConfig() 获取变量。
  • 可用 Nuxt 的环境覆盖功能做更细致的区分。

参考：Nuxt 环境变量官方文档、Runtime Config、Nuxt 配置环境覆盖

avatar
文章
阅读
粉丝