官方示例

Nuxt3给到了4个方法,官方的示例:useFetch, useLazyFetch, useAsyncData and useLazyAsyncData 确实对获取接口数据进行更友好的封装，这里就不多赘述了，想体验这种写法的可以移步官网去查看，这里有详细的说明还有示例。

这种方式对于新项目来说完全没有问题，但是要改造vue3+vite的项目，这里就不太合适了，原因有俩点：

• 原项目接口获取使用的是axios插件，而且基于axios进行了很多的接口封装，这对于用axios做过整体项目的同学，深有体会，如果都转成这种形式工作量会倍增
• 这种获取数据的方法只能用在script-setup,或者setup函数体里面，这对于在methods里面已经调用的很多逻辑需要再次改写，工作量再次倍增~~

解决办法

引入插件

// nuxt.config.ts
export default defineNuxtConfig({
     vite:{
            server: {
                proxy: {
                  '/api': {
                     target: 'http://xxxxxxxx', 
                    rewrite: (path) => path.replace(/^\/api/, ''),
                  }
                },
              }
})

兜兜转转，其实nuxt3已经完全兼容了vite的配置，这里在nuxt.config.ts里面配置好需要的跨域等操作，axios跟原来一样使用就好，这一点还是很给力的~~