一、关于api封装

1. 封装useFetch

// utils/request.js

const fetch = async (url, options, headers) => {
    try {
        const { public: { BASE_URL } } = useRuntimeConfig()
        const reqUrl = BASE_URL + url
        const customHeaders = {
            'Content-Type': 'application/json',
        }
        const token = useCookie('token')
        customHeaders.Authorization = (token.value || '')
        const { data, error } = await useFetch(reqUrl, {
            ...options,
            headers: customHeaders
        })
        const result = data.value
        if (error.value) {
            return Promise.reject(error)
        }
        if (result) {
            if (result.code === 1000) {
                return result.resultMap
            }
            if (result.code === 20001) { //未登录
                const router = useRouter()
                router.push({
                    path: '/login',
                    query: {
                        redirect: encodeURIComponent(router.currentRoute.value)
                    }
                })
            } else {
                return Promise.reject(result)
                // if (process.client) {
                //     return Promise.reject(result)
                // }
                // throw createError({
                //     statusCode: 500,
                //     statusMessage: reqUrl,
                //     message: result.message
                // })
            }

        }
    } catch(e) {
        return Promise.reject(e)
    }
}

export default {
    get(url, params, headers = {}) {
        return fetch(url, { method: 'get', params }, headers)
    },
    post(url, body, headers = {}) {
        return fetch(url, { method: 'post', body}, headers)
    }
}

2. 封装api

// api/user.js
import request from "~/utils/request"
export default {
    getUserInfo() {
        return request.get('/api/userInfo')
    }
}

3. 自动导出api

// api/index.js
const files = import.meta.glob('./*.js')
const modules = {}
for (const key in files) {
    const res = await files[key]()
    //设置模块名称，user.js -> userApi: {}
    modules[key.replace(/(\.\/|\.js)/g, '') + 'Api'] = res.default 
}
Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})
export default modules

4. 封装composables

// composables/api.js
import api from '@/api/index'
export const useApi = () => api

5. 使用api

<script setup>
const { userApi } = useApi()
userApi.getUserInfo().then(res=>{})
</script>

二、关于代码执行

NUXT选择ssr模式是，首次打开页面（包含刷新当前页面），onMounted中的api无返回值，需要添加nextTick触发。

<script setup>
const { userApi } = useApi()
const getUserInfo = async () => {
    await nextTick()
    const userInfo = await userApi.getUserInfo()
}
onMounted(() => {
    getUserInfo()
})

三、多环境参数配置

添加.env环境文件, 如.env.development, package.json添加环境变量 nuxt build --mode development

// nuxt.config.js
const envScript = process.env.npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1] //这块是设定环境参数在最后一位，具体情况具体配置
const envConfig = require('dotenv').config({
    path: `.env.${envName || 'development'}`
}).parsed

export default defineNuxtConfig({
    runtimeConfig: { // 具体用法参考官方文档
        public: envConfig
    }
})

// test.vue
setup(){
    const { public: { VITE_BASE_URL } } = useRuntimeConfig()
}