方案一：前端动态设置 meta/title（基础方案）
适合对 SEO 要求不高、只需简单优化的场景。
优点
- 实现简单，无需改动项目结构
- 对于百度、Google 部分页面有一定效果
缺点
- 仅对部分搜索引擎有效，内容型 SEO 效果有限
实现思路
- 可以用 vue-meta、@vueuse/head 等库，或手动操作 DOM。
- 利用 Vue Router 的路由守卫，在每次路由切换时动态设置页面的 title 和 meta 标签
实现思路一：
用 @vueuse/head 实现动态 SEO
1.安装依赖：
npm install @vueuse/head
2.在 main.js 里引入并挂载：
import { createHead } from '@vueuse/head'
const head = createHead()
app.use(head)
3.在页面组件中使用：
<script setup>
import { useHead } from '@vueuse/head'
useHead({
title: '首页 - 我的站点',
meta: [
{ name: 'description', content: '这里是首页描述' }
]
})
</script>
实现思路二：
1.给 routes 中为每个页面配置 meta: { title: 'xxx', description: 'xxx' }
2.在 vue-router 的 afterEach 钩子中动态设置
router.afterEach((to) => {
// 设置标题
if (to.meta.title) {
document.title = to.meta.title;
}
// 设置meta描述
if (to.meta.description) {
let meta = document.querySelector('meta[name="description"]');
if (!meta) {
meta = document.createElement('meta');
meta.name = 'description';
document.head.appendChild(meta);
}
meta.content = to.meta.description;
}
});
方案二：服务端渲染（SSR）或预渲染（Prerender）
适合对 SEO 要求较高的场景。
SSR（如 Nuxt、Next、Vite SSR）
- 让服务器返回“已渲染好 HTML 内容”的页面，搜索引擎能直接抓取。
- 需要用 Nuxt（Vue3）、Next（React）、Vite SSR 等方案重构项目。
预渲染（Prerender）
- 用 prerender-spa-plugin 或 vite-plugin-ssr 等工具，在打包时生成静态 HTML 文件。
- 适合页面数量有限、内容相对静态的 SPA 项目。
SSR
在 Vue3 + Vite 项目中实现 SSR（服务端渲染，Server Side Rendering），可以让你的页面内容在服务器端渲染成完整 HTML 返回给浏览器和搜索引擎，从而极大提升 SEO 效果和首屏加载速度。
SSR 的基本原理
- 传统 SPA：浏览器先下载 JS，再由 JS 渲染页面内容，搜索引擎难以抓取。
- SSR：服务器直接返回渲染好的 HTML，搜索引擎和用户都能直接看到完整内容。
Vue3 + Vite 实现 SSR 的主流方案
方案一：使用 Vite 官方 SSR 模式
Vite 官方支持 SSR，但需要你手动搭建 SSR 入口和服务端渲染逻辑。
基本步骤
- 新建 SSR 入口文件（如 src/entry-server.js 和 src/entry-client.js）
- 新建服务端渲染脚本（如 server.js，用 Node.js/Express/Koa 等）
- 调整 Vite 配置，支持 SSR 构建
- 路由、状态管理等需适配 SSR
适合人群
- 有一定 Node.js 基础
- 需要高度自定义 SSR 逻辑
方案二：使用社区成熟方案 vite-plugin-ssr
vite-plugin-ssr 是 Vite 生态下最流行的 SSR 插件，支持 Vue3/React/Solid 等，文档完善，上手简单。
基本步骤
1.安装依赖
npm install vite-plugin-ssr
2.按官方文档重构入口文件和页面结构
3.启动 SSR 服务
官方文档：vite-plugin-ssr.com/
