Vue 3中如何使用meta标签？配置vue-meta后页面白屏求助

你遇到的页面全白问题，核心原因是未全局注册vue-meta插件，直接在组件中调用useMeta会导致运行时错误，中断页面渲染。以下是具体解决步骤及SSR适配方案：

1. 全局注册vue-meta插件 #

在项目入口文件（main.js/main.ts）中添加插件注册代码：

import { createApp } from 'vue'
import { createMetaManager } from 'vue-meta'
import App from './App.vue'

const app = createApp(App)
// 必须先创建并挂载meta管理器
app.use(createMetaManager())
app.mount('#app')

2. 组件内正确使用useMeta #

全局注册完成后，你的组件代码可以正常使用，若需要响应式修改meta信息，可通过返回的meta对象操作：

<script>
import { useMeta } from 'vue-meta'
export default {
  name: 'HomeView',
  setup() {
    const { meta } = useMeta({
      title: 'Site name - Page Name',
      htmlAttrs: {
        lang: 'pt-br',
      }
    })

    // 响应式修改示例
    // meta.title.value = '更新后的页面标题'

    return {}
  }
}
</script>

3. SSR配置适配（满足SEO需求） #

要实现SSR端的meta渲染，需在服务器入口中提取并注入meta标签：

// 服务器端渲染入口示例
import { createApp, renderToString } from 'vue'
import { createMetaManager, getMetaManager } from 'vue-meta'
import App from './App.vue'

export async function renderServerSide(url) {
  const app = createApp(App)
  const metaManager = createMetaManager()
  app.use(metaManager)

  // 渲染应用HTML
  const appHtml = await renderToString(app)

  // 提取生成的meta标签及html属性
  const metaInstance = getMetaManager(app)
  const metaHtml = metaInstance.inject().html
  const htmlAttrs = metaInstance.inject().htmlAttrs.text

  // 拼接最终HTML，将meta插入head
  return `
    <!DOCTYPE html>
    <html ${htmlAttrs}>
      <head>${metaHtml}</head>
      <body>
        <div id="app">${appHtml}</div>
      </body>
    </html>
  `
}

这样服务器渲染的HTML会直接包含正确的meta标签，爬虫可直接读取，满足SEO要求。

4. 额外排查点 #

• 查看浏览器控制台报错：若仍有问题，检查Console面板的错误信息，确认是否存在Vue3版本不兼容（需Vue3.0+）或依赖缺失情况。
• 排查插件冲突：暂时禁用其他操作DOM或meta的插件，测试是否存在冲突。

内容的提问来源于stack exchange，提问作者William Querino Carriello