Nuxt.js 环境变量配置与使用


title: Nuxt.js 环境变量配置与使用
date: 2024/7/25
updated: 2024/7/25
author: cmdragon

excerpt:
摘要:“该文探讨了Nuxt.js框架下环境变量配置的详细过程,涉及.env文件配置、运行时访问、安全性考量、在不同场景下的实践(如Vue应用、插件、服务器路由)及多环境配置下的最佳实践。”

categories:

  • 前端开发

tags:

  • Nuxt.js
  • 环境变量
  • 配置管理
  • 运行时配置
  • 安全性
  • TypeScript
  • 多环境部署


扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

环境变量是配置应用程序的一种常见方式,特别是在不同的环境(如开发、测试、生产)中管理不同的配置值时。在 Nuxt.js
中,环境变量可以通过.env文件来设置,并在应用程序中读取。以下是对您提供信息的总结和解释:

环境变量配置

  1. .env文件

    • Nuxt CLI 支持在开发、构建和生成过程中读取.env文件。
    • 当运行构建后的服务器时,不会读取.env文件。
  2. 环境变量要求

    • 变量必须在nuxt.config中定义,以避免环境变量直接暴露给应用程序代码。
    • 只有以NUXT_开头的大写环境变量,并且使用_分隔键和大小写变化的环境变量可以覆盖运行时配置属性。
  3. 示例

    • .env文件内容:

      NUXT_API_SECRET=api_secret_token
      NUXT_PUBLIC_API_BASE=https://nuxtjs.org
      
      
    • nuxt.config.ts配置:

      export default defineNuxtConfig({
        runtimeConfig: {
          apiSecret: '', // 可以由 NUXT_API_SECRET 环境变量覆盖
          public: {
            apiBase: '', // 可以由 NUXT_PUBLIC_API_BASE 环境变量覆盖
          }
        },
      });
      
      

读取运行时配置

  1. 在 Vue 应用中

    • 使用useRuntimeConfig()方法来访问运行时配置。
    • 在客户端,只有runtimeConfig.public中的键可用,并且是可写和响应式的。
    • 在服务器端,整个运行时配置都可用,但它是只读的。
  2. 示例

    • pages/index.vue页面:

      <script setup>
      const config = useRuntimeConfig()
      
      console.log('运行时配置:', config)
      if (process.server) {
        console.log('API 密钥:', config.apiSecret)
      }
      </script>
      
      <template>
        <div>
          <div>请检查开发者控制台!</div>
        </div>
      </template>
      

安全提示

  • 不要通过渲染或传递给useState来暴露运行时配置键给客户端。

插件中使用运行时配置

  • 在自定义插件中,可以在defineNuxtPlugin函数内部使用useRuntimeConfig()

  • 示例:plugins/config.ts

    export default defineNuxtPlugin((nuxtApp) => {
      const config = useRuntimeConfig()
    
      console.log('API 基础 URL:', config.public.apiBase)
    });
    
    

服务器路由中使用运行时配置

  • 在服务器路由中,可以使用useRuntimeConfig访问运行时配置。

  • 示例:server/api/test.ts

    export default defineEventHandler(async (event) => {
      const { apiSecret } = useRuntimeConfig(event)
      const result = await $fetch('https://my.api.com/test', {
        headers: {
          Authorization: `Bearer ${apiSecret}`
        }
      })
      return result
    })
    
    

对运行时配置进行类型定义

  • Nuxt 尝试自动生成 TypeScript 接口,但也可以手动添加类型。

  • 示例:index.d.ts

    declare module 'nuxt/schema' {
      interface RuntimeConfig {
        apiSecret: string
      }
      interface PublicRuntimeConfig {
        apiBase: string
      }
    }
    // 当增强类型时,确保始终导入/导出某些内容是很重要的
    export {}
    

指定不同环境的配置

创建自定义环境文件

首先,你需要创建一个自定义的环境文件,例如 `.env.local`。这个文件应该包含你希望在开发环境中使用的环境变量。

```
# .env.local
MY_VARIABLE=my_value

```

使用--dotenv参数启动 Nuxt 开发服务器

使用npx nuxi dev --dotenv .env.local命令来启动 Nuxt 开发服务器,并指定要加载的环境文件为.env.local

```
npx nuxi dev --dotenv .env.local

```

这条命令会执行以下操作:

-   加载 `.env.local` 文件中的环境变量。
-   将这些环境变量添加到 `process.env` 对象中。
-   启动 Nuxt 开发服务器。

自动重启机制

在开发模式下,Nuxt 会监视.env.local文件的变化。如果你修改了.env.local文件并保存,Nuxt 会自动检测到这些变化,并重启开发服务器以应用新的环境变量值。

这意味着你不需要手动重启服务器,Nuxt 会自动完成这一步骤,确保你的环境变量始终是最新的。

示例

假设你有一个.env.local文件,内容如下:

# .env.local
API_URL=http://localhost:3000/api
DEBUG_MODE=true

你可以使用以下命令启动 Nuxt 开发服务器:

npx nuxi dev --dotenv .env.local

在开发过程中,如果你修改了.env.local文件,例如将DEBUG_MODE改为false

# .env.local
API_URL=http://localhost:3000/api
DEBUG_MODE=false

保存文件后,Nuxt 会自动检测到变化并重启服务器,使新的环境变量生效。

i .env.local changed, restarting server...
i server restarted.

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:Nuxt.js 环境变量配置与使用 | cmdragon's Blog

往期文章归档:

热门相关:隋唐君子演义   脑洞大爆炸   春秋我为王   神话版三国   婚婚欲醉:腹黑老公萌宠妻