使用 Vite + Vue实现SPA单页面

1. 项目初始化

创建基础项目

npm create vite@latest vue-seo-spa --template vue
cd vue-seo-spa
npm install

安装 Vue 全家桶和 SEO 相关插件

npm install vue-router pinia
npm install vue-meta vite-plugin-html @vueuse/head
npm install prerender-spa-plugin -D

2. 项目配置

修改 vite.config.js

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: 'Vue SEO SPA - 优化单页面应用',
          description: '这是一个使用Vite+Vue构建的SEO优化单页面应用示例'
        }
      }
    })
  ]
})

创建路由配置 src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页 - Vue SEO SPA',
      description: '这是我们的首页，展示最新产品和服务'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们 - Vue SEO SPA',
      description: '了解我们的公司历史和团队成员'
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

创建 SEO 元数据管理 src/utils/seo.js

import { useHead } from '@vueuse/head'

export const useSeoMeta = (meta) => {
  useHead({
    title: meta.title,
    meta: [
      { name: 'description', content: meta.description },
      { property: 'og:title', content: meta.title },
      { property: 'og:description', content: meta.description },
      { property: 'og:type', content: 'website' },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:title', content: meta.title },
      { name: 'twitter:description', content: meta.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 head = createHead()

app.use(createPinia())
app.use(router)
app.use(head)

app.mount('#app')

3. 创建页面组件

src/views/Home.vue

<template>
  <div class="home">
    <h1>欢迎来到 Vue SEO SPA</h1>
    <p>这是一个经过SEO优化的单页面应用示例</p>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

<script>
import { useSeoMeta } from '../utils/seo'

export default {
  name: 'HomeView',
  setup() {
    useSeoMeta({
      title: '首页 - Vue SEO SPA',
      description: '这是我们的首页，展示最新产品和服务'
    })
  }
}
</script>

src/views/About.vue

<template>
  <div class="about">
    <h1>关于我们</h1>
    <p>我们是一个致力于前端开发和SEO优化的团队</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
import { useSeoMeta } from '../utils/seo'

export default {
  name: 'AboutView',
  setup() {
    useSeoMeta({
      title: '关于我们 - Vue SEO SPA',
      description: '了解我们的公司历史和团队成员'
    })
  }
}
</script>

修改 src/App.vue

 

<template>
  <header>
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
  </header>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
  margin: 0 10px;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

4. 项目介绍

技术栈说明

1. Vite: 下一代前端构建工具，提供极快的启动和热更新

2. Vue 3: 渐进式 JavaScript 框架

3. Vue Router: 官方路由管理器

4. Pinia: Vue 的状态管理库

5. @vueuse/head: 管理文档头部的 Vue 组合式 API

6. vite-plugin-html: 用于 HTML 模板和变量注入

SEO 优化措施

1. 动态元标签: 每个路由都有独立的标题和描述

2. 社交媒体元数据: 添加了 Open Graph 和 Twitter Card 元数据

3. 预渲染: 通过 prerender-spa-plugin 配置预渲染（需进一步配置）

4. 语义化 HTML: 使用合理的 HTML 结构

5. 服务端渲染(SSR)准备: 虽然当前是 SPA，但结构易于迁移到 SSR

项目结构

 

vue-seo-spa/
├── public/
├── src/
│   ├── views/          # 页面组件
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── utils/          # 工具函数
│   │   └── seo.js
│   ├── router/         # 路由配置
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

5. 运行项目

npm run dev