Nuxt3配置报错：defineNuxtConfig导入失败及env属性不被识别

问题根源 #

1. env配置项已废弃：Nuxt 3不再支持env字段，改用runtimeConfig来统一管理环境变量。
2. defineNuxtConfig导入路径错误：正确的导入来源是nuxt/config，而非直接nuxt。

修复步骤 #

1. 修正defineNuxtConfig导入语句

把错误的导入替换为：

import { defineNuxtConfig } from 'nuxt/config'

2. 用runtimeConfig替换env配置

根据变量的访问范围，将环境变量放到runtimeConfig的对应区域：

• 若BASE_URL需要在客户端和服务端都能访问，放在public子对象中；
• 若仅需在服务端访问，直接放在runtimeConfig根层级即可。

假设你需要前端也能读取BASE_URL，完整配置如下：

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
  // 替换原有的env配置
  runtimeConfig: {
    public: {
      baseUrl: process.env.BASE_URL
    }
  },
  ssr: false 
})

3. 配置.env文件

在项目根目录创建.env文件，添加你的环境变量：

BASE_URL=https://your-target-domain.com

代码中调用变量的方式 #

• 客户端/组件内：通过useRuntimeConfig()获取公开变量

<script setup>
const config = useRuntimeConfig()
console.log(config.public.baseUrl)
</script>

• 服务端（如API路由）：同样使用useRuntimeConfig()，可同时访问私有和公开变量

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