跳到主要内容

nuxt环境变量

环境配置​

  • 1、可通过nuxt配置中，利用runtimeConfig去动态配置环境变量

  • 2、Nuxt 内置了对加载 .env 文件的支持

env配置​

Nuxt 3 默认使用 dotenv 机制，你可以创建以下几个 .env 文件：

  • .env：默认加载（所有环境通用）
  • .env.development：开发环境专用（nuxi dev）
  • .env.production：生产环境专用（nuxi build + nuxi preview 或部署后运行）

注意点：

  • 在 .env 文件中定义变量（必须使用 NUXT_ 前缀）
  • Nuxt 会将 .env 文件中以 NUXT_ 开头的变量注入为公开的运行时环境变量，可通过useRuntimeConfig()获取

统一管理 API 接口地址​

  • 创建一个api hooks工具方法，统一管理api相关
js
export function useApi() {
  const config = useRuntimeConfig()
  const baseUrl = config.public.apiBaseUrl

  const fetchApi = async (url: string, options: any = {}) => {
    const res = await $fetch(baseUrl + url, {
      ...options,
      headers: {
        ...options.headers,
        'Content-Type': 'application/json',
      }
    })
    return res
  }

  return {
    fetchApi,
  }
}

修改生产环境端口号​

  • 通过设置PORT环境变量，来指定生产环境端口
类别环境变量用途
基础HOST / PORT控制监听地址和端口
Nuxt专属NUXT_HOST / NUXT_PORT / NUXT_PUBLIC_* / NUXT_DEBUG / NITRO_PRESET控制构建和运行行为
标准NodeNODE_ENV切换开发/生产模式
公共变量NUXT_PUBLIC_*会注入客户端，可用于 API 地址、配置开关等
  • HOST 、PORT 实际是 Node.js 服务端惯用的环境变量
    • Nuxt 3 的服务底层是node服务
    • PORT 和 HOST 是默认Node通用变量
    • 当build构建之后，在.output的入口文件中，是可以看到process.env.PORT 和process.env.HOST

验证 HOST/PORT 生效

bash
console.log('Server running at:', process.env.HOST, process.env.PORT)