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文件来设置，并在应用程序中读取。以下是对您提供信息的总结和解释：

环境变量配置

.env文件：
- Nuxt CLI 支持在开发、构建和生成过程中读取.env文件。
- 当运行构建后的服务器时，不会读取.env文件。
环境变量要求：
- 变量必须在nuxt.config中定义，以避免环境变量直接暴露给应用程序代码。
- 只有以NUXT_开头的大写环境变量，并且使用_分隔键和大小写变化的环境变量可以覆盖运行时配置属性。

示例：

.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 环境变量覆盖

    }

  },

});

读取运行时配置

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

示例：

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

往期文章归档：