1.前言

如果你的网站是面向很多用户。追求极致的性能。我推荐你使用如下的脚手架。单独的Vue+vite非常难搞。对应模块比较少

• Vuepress
• Nuxt.js

上方的模块都自带了对应的SEO模块。可以非常方便的进行引用和操作。

2.普通的Vue3 + vite该如何进行动态修改

这里使用的模块叫unhead，也是本站使用的模块。

如何使用

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createHead } from '@unhead/vue'



// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
createApp(App).use(store).use(router).use(UndrawUi).use(ElementPlus).use(createHead).mount('#app')

在页面上进行使用

import {useHead} from '@unhead/vue'

const myPage = ref({description: ''})

useHead({
  meta: [{name: 'description', content: () => myPage.value.description}]
  // computed (not recommended)
})

//从任意一个接口中取值
myPage.value.description = data.data[0].content

3.结尾

使用这个模块可以非常方便的进行动态修改meta中的name=“description”。但是关于keyword目前我还没有看到其他的模块。如果有的话可以发给我。