Nuxt3踩坑记录1

因为公司要求，一个企业官网需要使用nuxt3开发，ssr模式渲染

1. 设置基础路由 统一设置接口地址 http://127.0.0.1:8080/pc/article/list

export default defineNuxtConfig({
  nitro:{
    // 本地代理，隐藏服务器接口，设置基础的接口地址
    devProxy:{
      '/server': {
        target:"http://127.0.0.1:8080/",
        changeOrigin:true,
      }
    },
    routeRules:{
      '/server/**':{
        proxy:"http://127.0.0.1:8080/**"
      }
    },
  },
  runtimeConfig: {
    public: {
      baseUrl: '/server/',
    },
  },
})


// 使用
const config = useRuntimeConfig()
let {data} = await useAsyncData('list',()=>$fetch('/pc/article/list?pageSize=6',{ baseURL: config.public.baseUrl }),)

3. Nuxt3本地代理 虽然Nuxt3是一个全栈的框架，但是也会遇到后端服务由第三方提供的情况,这就需要本地代理。通过nitro提供的devProxy配置项

    // nuxt.config.ts
    export default defineNuxtConfig({
        nitro:{
            // 本地代理，隐藏服务器接口，设置基础的接口地址
            devProxy:{
              '/server': {   //这里可以替换成你想要的接口
                target:"http://127.0.0.1:8080/",
                changeOrigin:true,
              }
            },
         },
    })

3. Nuxt3服务端路由 只配置本地代理的话，如果在服务端渲染数据时是请求不到接口的，各种花式的错误。需要配置服务端的路由规则

    // nuxt.config.ts
     export default defineNuxtConfig({
         nitro:{
          '/server/**':{
              proxy:"http://127.0.0.1:8080/**"
          }
        },
     })

其实完全可以不添加/server/,在我的这个项目中/pc也是通用的，为了增强保密性添加的/server/（纯纯自己想加的）。 简单记录一下，如果有不对的，随时修正~