在 Nuxt 項目中使用 Axios 進行網絡請求有兩種常用方式：一是直接安裝 Axios 并全局配置，二是使用 Nuxt 官方推薦的 @nuxtjs/axios 模塊（更便捷）。以下是詳細步驟：

方法一：使用官方推薦的 @nuxtjs/axios 模塊（推薦）

1. 安裝依賴

npm install @nuxtjs/axios --save
# 或
yarn add @nuxtjs/axios

2. 在 nuxt.config.js 中配置

export default {modules: ['@nuxtjs/axios', // 引入模塊],axios: {// 配置基礎URL（可選）baseURL: 'https://api.example.com', // 后端API的基礎路徑// 其他配置（如超時時間）timeout: 10000,// 允許跨域（根據需求配置）credentials: true}
}

3. 在組件/頁面中使用

通過 this.$axios 調用，支持在 asyncData、fetch、methods 等場景使用：

<template><div><h1>{{ post.title }}</h1><p>{{ post.content }}</p></div>
</template><script>
export default {// 服務端/客戶端獲取數據（頁面渲染前執行）async asyncData({ $axios }) {try {const res = await $axios.get('/posts/1') // 基于baseURL的相對路徑return { post: res.data } // 直接返回數據給頁面} catch (error) {console.error('請求失敗:', error)return { post: null }}},// 在方法中使用（客戶端執行）methods: {async fetchMoreData() {try {const res = await this.$axios.post('/comments', { content: 'Hello' })console.log('提交成功:', res.data)} catch (error) {console.error('提交失敗:', error)}}}
}
</script>

方法二：直接使用 Axios（手動配置）

1. 安裝 Axios

npm install axios --save
# 或
yarn add axios

2. 創建 Axios 實例（推薦）

在 plugins 目錄下創建 axios.js：

// plugins/axios.js
import axios from 'axios'const instance = axios.create({baseURL: 'https://api.example.com',timeout: 10000
})// 請求攔截器（可選）
instance.interceptors.request.use(config => {// 可添加token等邏輯return config},error => Promise.reject(error)
)// 響應攔截器（可選）
instance.interceptors.response.use(response => response.data,error => Promise.reject(error)
)export default instance

3. 在 nuxt.config.js 中注冊插件

export default {plugins: ['~/plugins/axios' // 注冊插件]
}

4. 在組件中使用

<script>
import axios from '~/plugins/axios' // 導入實例export default {async asyncData() {const post = await axios.get('/posts/1')return { post }}
}
</script>

關鍵注意事項

1. 服務端 vs 客戶端：

   • asyncData 和 fetch 中的請求在服務端執行（首屏）或客戶端路由跳轉時執行。
   • methods 中的請求僅在客戶端執行。

2. 錯誤處理：務必使用 try/catch 捕獲異常，避免請求失敗導致頁面崩潰。

3. 環境變量：建議將 baseURL 等配置放在 .env 文件中，通過 process.env 讀取，區分開發/生產環境。

通過上述方法，即可在 Nuxt 中便捷地使用 Axios 進行網絡請求，推薦優先使用 @nuxtjs/axios 模塊，它與 Nuxt 生態更契合，支持自動注入和服務端適配。