配置环境变量

1、创建 .env 文件（列：.env.xxx）放置根目录下，我这里是配置了三个环境，对应运行环境 .env.development、生产环境 .env.production、测试环境 .env.staging

2、在 nuxt.config.ts 文件里面添加以下配置，VUE_APP_BASE_API 对应自己在第一步环境里面配置的参数

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      VUE_APP_BASE_API: process.env.VUE_APP_BASE_API
    }
  },
})

3、在 package.json 文件里面添加以下配置，执行对应的命令就可以使用对应的环境变量啦

{
  "scripts": {
    "dev": "nuxt dev --dotenv .env.development",
    "serve": "nuxt dev --dotenv .env.development",
    "build": "nuxt build --dotenv .env.production",
    "build:stage": "nuxt build --dotenv .env.staging",
    "build:prod": "nuxt build --dotenv .env.production",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
}

接口请求封装

1、在src文件夹下新建一个API文件夹，用来存放封装所有的API，目录接口如以下

2、在api文件夹下新建 index.ts 文件，将API文件夹下的按模块区分的modules全导出

// src/api/index.ts
// 获取 modules 目录下文件名格式为 `*.ts` 的文件并导出
const modulesFiles: Record<string, any> = import.meta.glob("./modules/**/*.ts", { eager: true })

let modules: Record<string, any> = {}

for (const modulePath in modulesFiles) {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1").split("/").pop()
  modules[moduleName || ''] = modulesFiles[modulePath].default
}

export default modules

3、在api文件夹下新建 request.ts 文件，封装 fetch 请求，处理相关的响应数据

// src/api/request.ts
import type { NitroFetchRequest } from 'nitropack'
import type { FetchOptions } from 'ofetch'
import { ElMessage } from 'element-plus'

interface Params {
  url: NitroFetchRequest,
  method?: 'post' | 'get',
  opts: FetchOptions<any>
}

export default async function $request({url, method = 'post', opts}: Params) {
  // 获取环境变量设置的域名
  const config = useRuntimeConfig()
  const { data } = await useFetch(url, {
    method,
    baseURL: config.public.VUE_APP_BASE_API,
    // 请求拦截器
    onRequest({ request, options }) {
      // 社会请求头
      options.headers = { ...options.headers, authorization: 'xxx' }
      // 设置请求参数
      options.body = opts
    },
    // 响应拦截器
    onResponse({ response }) {
      // 此处处理请求参数（根据自己的业务做调整）
      if (response._data.status == 200) {
        return response._data
      } else {
        // 接口报错处理
        ElMessage({
          message: '请求异常，请联系管理员处理！',
          type: 'error',
        })
      }
    },
    // 请求错误处理
    onRequestError({ request, options, error }) {
      console.warn('request error', error)
      ElMessage({
        message: '请求错误，请联系管理员处理！',
        type: 'error',
      })
    },
    // 响应错误处理
    onResponseError({ request, options, response }) {
      console.warn('request error', response)
      ElMessage({
        message: '响应错误，请联系管理员处理！',
        type: 'error',
      })
    }
  })
  // 将拿到的数据抛出去
  return data.value
}

4、在api/modules文件夹下新建对应的模块文件，统一管理接口

// src/api/modules/login.ts
import $request from "../request"

export default {
  userLogin: (options: any = {}) => {
    return $request({ url: `/user/login`, opts: options })
  },
}

5、在composables文件夹下新建 useApi.ts 文件，将API挂载在全局

// src/composables/useApi.ts
import api from '~/api/index'

export const useApi = () => api

6、页面上使用

const { data } = await useApi().login.userLogin()