How to set global API baseUrl used in useFetch in Nuxt 3

在Nuxt 3中设置全局API的baseUrl通常是一个重要的步骤，因为它可以帮助您在整个应用程序中统一管理API请求的基础URL。这样做可以使维护和可能的迁移工作更加容易。以下是如何在Nuxt 3中设置和使用全局API baseUrl的步骤：

步骤 1: 配置环境变量

首先，您应该在您的项目根目录下的.env文件中设置API的baseUrl。这样可以确保您的基础URL可以根据不同的环境（开发、生产等）进行调整。

plaintext
# .env
BASE_URL=https://api.example.com

步骤 2: 更新nuxt.config.ts文件

接着，您需要在nuxt.config.ts（或nuxt.config.js，取决于您使用的语言）中引用这个环境变量，并将其设置为全局变量。这可以通过配置publicRuntimeConfig实现，这样在客户端和服务端都能访问这个变量。

typescript
// nuxt.config.ts
export default defineNuxtConfig({
  publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL
  }
})

步骤 3: 在组件中使用useFetch

在您的Vue组件中，您现在可以使用useFetch时引入useRuntimeConfig来获取baseUrl。这样，每次使用useFetch时都会自动使用设置的基础URL。

vue
<script setup>
import { useFetch } from 'nuxt/app';
import { useRuntimeConfig } from '#imports';

const config = useRuntimeConfig();
const { data, error } = await useFetch('/users', { baseURL: config.baseUrl });
</script>

示例说明

假设您的API有一个端点/users，这将返回用户列表。在上面的组件脚本中，useFetch被调用时使用了config.baseUrl作为baseURL参数。这意味着实际请求的URL将是https://api.example.com/users（取决于您.env文件中的设置）。

这个方法的优点是，您可以在一个地方更新您的API地址，而且这个变化会自动反映在整个应用程序中。此外，通过使用环境变量和配置文件，您可以轻松地为不同的部署环境（如开发、测试和生产）设置不同的API地址，这使得管理和部署变得更加简单和灵活。