vue3 服务端渲染页面title和meta标签

在 Vue3 中，可以使用 `createHead` 函数来创建头部标签，包括 title 和 meta 标签。具体的步骤如下：

1. 在入口文件中，引入 `createHead` 函数和 `createApp` 函数。

import { createApp } from 'vue';
import { createHead } from '@vueuse/head';
import App from './App.vue';

const app = createApp(App);

2. 在创建应用程序实例之前，创建一个头部标签实例。

const head = createHead();

3. 将头部标签实例添加到应用程序实例中。

app.use(head);

4. 在组件中，使用 `useHead` 函数来设置标题和 meta 标签。

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
import { useHead } from '@vueuse/head';

export default {
  setup() {
    useHead({
      title: 'My Page',
      meta: [
        { name: 'description', content: 'This is my page' },
        { name: 'keywords', content: 'vue, ssr, meta' },
      ],
    });
  },
};
</script>

这样就可以在服务端渲染时自动生成相应的 title 和 meta 标签了。