基于 Vite 与 Vue 构建支持 SEO 的单页应用
项目初始化
通过 Vite 快速搭建 Vue 项目基础结构：
npm create vite@latest seo-friendly-spa --template vue
cd seo-friendly-spa
npm install安装核心依赖与 SEO 工具
npm install vue-router pinia
npm install @vueuse/head vite-plugin-html
npm install prerender-spa-plugin -D配置构建环境
更新 vite.config.js 文件以集成 HTML 注入与元数据管理：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
vue(),
createHtmlPlugin({
minify: true,
inject: {
data: {
title: 'SEO 友好型 Vue 单页应用',
description: '使用 Vite + Vue 构建的可搜索引擎优化的前端应用'
}
}
})
]
})路由系统设置
在 src/router/index.js 中定义页面导航规则：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const routes = [
{
path: '/',
name: 'Home',
component: HomeView,
meta: {
title: '首页 | 网站名称',
description: '展示最新动态与服务内容'
}
},
{
path: '/about',
name: 'About',
component: AboutView,
meta: {
title: '关于团队 | 网站名称',
description: '深入了解我们的发展历程与核心成员'
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router统一管理页面元信息
创建 src/utils/metaManager.js 来集中处理标题与描述：
import { useHead } from '@vueuse/head'
export const setMetaTags = (metaConfig) => {
useHead({
title: metaConfig.title,
meta: [
{ name: 'description', content: metaConfig.description },
{ property: 'og:title', content: metaConfig.title },
{ property: 'og:description', content: metaConfig.description },
{ property: 'og:type', content: 'website' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: metaConfig.title },
{ name: 'twitter:description', content: metaConfig.description }
]
})
}主应用入口配置
修改 src/main.js，引入状态管理、路由和头部管理器：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { createHead } from '@vueuse/head'
const app = createApp(App)
const headManager = createHead()
app.use(createPinia())
app.use(router)
app.use(headManager)
app.mount('#app')页面组件开发
实现两个典型页面：首页与关于我们。
src/views/HomeView.vue
<template>
<section class="home-page">
<h1>欢迎访问我们的网站</h1>
<p>本应用采用现代前端架构，兼顾性能与可搜索性。</p>
<router-link to="/about">了解更多详情</router-link>
</section>
</template>
<script>
import { setMetaTags } from '@/utils/metaManager'
export default {
name: 'HomeView',
setup() {
setMetaTags({
title: '首页 | 网站名称',
description: '展示最新产品与服务信息'
})
}
}
</script>src/views/AboutView.vue
<template>
<section class="about-page">
<h1>关于我们的团队</h1>
<p>我们专注于高效、可维护的前端解决方案。</p>
<router-link to="/">返回首页</router-link>
</section>
</template>
<script>
import { setMetaTags } from '@/utils/metaManager'
export default {
name: 'AboutView',
setup() {
setMetaTags({
title: '关于团队 | 网站名称',
description: '介绍公司背景与核心成员构成'
})
}
}
</script>主视图整合
<template>
<header>
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
</header>
<main>
<router-view />
</main>
</template>
<style>
#app {
font-family: 'Segoe UI', sans-serif;
text-align: center;
color: #333;
margin-top: 50px;
}
nav a {
margin: 0 15px;
font-weight: 500;
color: #4a5568;
text-decoration: none;
}
nav a.router-link-active {
color: #38bdf8;
border-bottom: 2px solid #38bdf8;
}
</style>技术选型说明
- Vite：提供极速冷启动与热更新能力
- Vue 3：响应式系统与组合式 API 支持
- Vue Router：声明式路由机制
- Pinia：轻量级状态管理方案
- @vueuse/head：运行时动态控制页面
<head>内容 - vite-plugin-html：支持模板注入与变量替换
SEO 优化策略
- 每个路由独立设置标题与描述
- 集成 Open Graph 与 Twitter 卡片标签
- 支持预渲染（通过
prerender-spa-plugin） - 使用语义化标签提升可读性
- 为未来迁移到 SSR 做好结构准备
项目目录结构
seo-friendly-spa/
├── public/
├── src/
│ ├── views/
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── utils/
│ │ └── metaManager.js
│ ├── router/
│ │ └── index.js
│ ├── App.vue
│ └── main.js
├── vite.config.js
└── package.json启动项目
npm run dev