Vue3+Vite服务端渲染项目无需vue-meta添加谷歌验证meta标签？

当然可以，完全没必要为了一行静态meta标签引入复杂插件，以下两种简单方法就能解决：

方法1：直接修改根HTML模板 #

找到项目中的根HTML文件（通常是index.html），在<head>标签内直接插入你的meta标签：

<head>
  <!-- 其他现有标签 -->
  <meta name="google-site-verification" content="你的验证内容" />
</head>

不管是服务端渲染还是客户端 hydration，所有页面都会继承这个模板的头部内容，这是最直接高效的方式。

方法2：服务端渲染时手动插入标签 #

如果你的SSR服务是自定义Node.js服务（比如用@vitejs/plugin-vue配合Express/Koa搭建），可以在服务端生成HTML的环节，手动将meta标签插入到<head>区域。比如在渲染逻辑中：

// 服务端渲染入口文件示例
import { renderToString } from '@vue/server-renderer'
import { createApp } from './app'

export async function render(url) {
  const { app, router } = createApp()
  await router.push(url)
  await router.isReady()

  const appHtml = await renderToString(app)
  // 直接将meta标签插入到head部分
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="google-site-verification" content="你的验证内容" />
        <!-- 其他head内容 -->
      </head>
      <body>
        <div id="app">${appHtml}</div>
      </body>
    </html>
  `
  return html
}

两种方法都能实现静态meta标签全局添加的需求，完全不需要依赖额外插件。

内容的提问来源于stack exchange，提问作者akif mammadov