Nuxt 3.12.4中.env变量在/lib普通.js文件无法读取的解决咨询

核心思路 #

Nuxt 3 内置环境变量处理能力，无需额外安装dotenv。普通JS文件无法直接通过process.env（客户端上下文无process对象）或this.$config（非组件上下文无法调用）获取配置，推荐用app.config统一管理环境配置，实现开发/生产环境的URL区分。

具体步骤 #

1. 配置环境专属.env文件
   在项目根目录创建对应环境的.env文件：

• .env.development（开发环境）：

API_URL=http://localhost:3000/api

• .env.production（生产环境）：

API_URL=https://your-prod-domain.com/api

Nuxt 3会根据运行模式自动加载对应文件：npm run dev加载开发环境配置，npm run build/npm run preview加载生产环境配置。

2. 用app.config.js统一管理配置
   在项目根目录新建app.config.js，动态关联环境变量：

export default defineAppConfig({
  apiUrl: process.env.API_URL
})

无需手动判断NODE_ENV，Nuxt会自动匹配当前环境的API_URL值。

3. 在/lib目录的JS文件中读取配置
   借助Nuxt自动导入的useAppConfig函数获取配置：

import { useAppConfig } from '#imports'

const { apiUrl } = useAppConfig()
// 后续直接使用apiUrl即可，开发/生产环境自动对应不同URL

注意事项 #

• 若JS文件仅在服务端运行（如服务端API逻辑），可直接使用process.env.API_URL，服务端上下文存在process对象。
• 确保nuxt.config.js中开启自动导入（默认已开启）：

export default defineNuxtConfig({
  imports: {
    autoImport: true
  }
})

• 不要手动调用require('dotenv').config()，Nuxt会自动处理.env文件加载，手动调用可能导致变量冲突或加载失败。

内容的提问来源于stack exchange，提问作者knirirr