vue3+Nuxt3的SEO设置，即动态设置title、关键字等信息

本文中实现了，在nuxt3开发过程中先请求接口再对title、关键字、icon图标等文件进行设置并实现伪静态渲染。

一、先看一下静态的设置方法

1. 方法一、可以直接在根目录的nuxt.config.js文件中进行书写
2. 方法二、在每个页面中进行单独的配置

方法一、 在nuxt.config.js文件中进行书写

export default defineNuxtConfig({
  app: {
    head:{
        title: '静态title',
        htmlAttrs: {
          lang: 'en'
        },
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { name: 'keywords', content: '静态keywords' },
          { name: 'description', content: '静态description' },
          { name: 'format-detection', content: 'telephone=no' }
          
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
 
    }
  },
})

方法二、在每个页面中进行单独的head配置，在官网中提到了两个API分别是useHead、useSeoMeta，本人感觉useHead更友好一些

useHead

<script setup>
useHead({
     title: `静态title`,
    meta: [
        { name: 'description', content: `静态description` },
         { name: 'keywords', content: `静态keywords` },
    ],
})
</script>

useSeoMeta

<script setup>
useSeoMeta({
  title: '静态title',
  description: '静态description',
  keywords: '静态keywords',
})
</script>

经过测试，以上两种方法都是可以实现，当然也可以只在nuxt.config.js文件中进行一些基础的配置，具体每个页面的标题关键字 使用方法二中提到的两个API到页面中进行具体配置。

二、再来看一下如何使用接口返回的数据，对标题、关键字等信息动态的写入

<script setup>
//1、异步调用接口获取数据，不懂的可以去看一下官网文档；注意一定要异步await和useAsyncData不要去掉，否则接口没有
//返回数据useHead就执行了
const { data } = await useAsyncData(() => $fetch('/verify/getDynamicImgCode', {
    // 配置选项
}))
console.log(data.value, "data")
//2、将获取到的数据使用useHead进行设置（使用.value）
useHead({
    title: `${data.value.msg}`,
    meta: [
        { name: 'description', content: `${data.value.msg}` },
        { name: 'keywords', content: `${data.value.msg}` },
    ],
})
</script>

最后来梳理一下：

1. 将接口改成你要调的接口，用来获取数据
2. 将获取到的数据塞进useHead即可

注意事项

1. 首先你要了解useAsyncData、useHead、useSeoMeta三个API
2. 其次要注意将获取SEO信息的接口放到useAsyncData去请求才能保证成功的写入