Nuxt 3环境变量读取异常致axios baseURL未定义及基础项目示例求助

一、修复Axios baseURL undefined问题 #

1. 环境变量配置（根目录创建.env文件） #

Nuxt3要求客户端可访问的环境变量必须以NUXT_PUBLIC_为前缀，服务器端专用变量用NUXT_前缀：

NUXT_PUBLIC_BASE_URL=https://your-api-domain.com

2. 修改Axios插件及配置文件 #

方案1：直接在插件中配置（更简洁）

// plugins/axios.js
import axios from "axios";

export default defineNuxtPlugin(() => {
  // 通过useRuntimeConfig获取Nuxt的运行时配置
  const runtimeConfig = useRuntimeConfig();
  
  const axiosInstance = axios.create({
    baseURL: runtimeConfig.public.BASE_URL,
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
  });

  return {
    provide: {
      axios: axiosInstance // 全局提供$axios供组件使用
    }
  };
});

方案2：保留独立配置文件

如果需要单独维护配置，可将配置改为函数形式，在插件中传入运行时配置：

// config/axios-config.js
export default (runtimeConfig) => ({
  baseURL: runtimeConfig.public.BASE_URL,
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// plugins/axios.js
import axios from "axios";
import createAxiosConfig from "@/config/axios-config.js";

export default defineNuxtPlugin(() => {
  const runtimeConfig = useRuntimeConfig();
  const axiosConfig = createAxiosConfig(runtimeConfig);
  const instance = axios.create(axiosConfig);

  return {
    provide: {
      axios: instance
    }
  };
});

问题原因 #

Nuxt3不会将所有process.env变量自动注入到应用中，必须通过NUXT_PUBLIC_/NUXT_前缀声明，并使用useRuntimeConfig()方法获取，直接调用process.env.BASE_URL无法拿到正确值。

二、Nuxt3基础项目结构示例 #

nuxt-app/
├── .nuxt/                 # 自动生成的构建缓存文件
├── assets/                # 编译型静态资源（CSS、图片等）
│   ├── css/
│   │   └── main.css
│   └── images/
├── components/            # 全局复用Vue组件
│   ├── Header.vue
│   └── Footer.vue
├── composables/           # 自定义组合式函数
│   └── useApi.js
├── config/                # 自定义配置文件
│   └── axios-config.js
├── layouts/               # 页面布局组件
│   └── default.vue
├── pages/                 # 自动生成路由的页面文件
│   ├── index.vue
│   └── about.vue
├── plugins/               # Nuxt插件（如Axios、全局指令）
│   └── axios.js
├── public/                # 无需编译的静态资源（原样输出）
│   ├── favicon.ico
│   └── robots.txt
├── server/                # 服务器端API路由
│   └── api/
│       └── hello.js
├── .env                   # 环境变量文件
├── nuxt.config.ts         # Nuxt核心配置文件
├── package.json
└── tsconfig.json          # TypeScript配置（可选）

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