vue SSG实现

Vue SSG（静态站点生成）实现方法

Vue SSG（Static Site Generation）通过预渲染将Vue应用转换为静态HTML文件，提升加载速度和SEO友好性。以下是具体实现方案：

使用VuePress

VuePress是Vue驱动的静态站点生成器，适合文档类网站：

1. 安装VuePress：

   npm install -D vuepress

2. 创建基本结构：

   mkdir docs && echo '# Hello VuePress' > docs/README.md

3. 在package.json中添加脚本：

   {
     "scripts": {
       "docs:dev": "vuepress dev docs",
       "docs:build": "vuepress build docs"
     }
   }

使用Nuxt.js

Nuxt.js提供开箱即用的SSG支持：

1. 创建Nuxt项目：

   npx create-nuxt-app my-ssg-project

2. 配置nuxt.config.js启用SSG：

   export default {
     target: 'static' // 启用静态生成模式
   }

3. 使用asyncData或fetch获取数据：

   export default {
     async asyncData({ params }) {
       return { post: await fetchPost(params.id) }
     }
   }

4. 生成静态文件：

   npm run generate

使用Vite + vite-plugin-ssr

对于自定义SSG方案：

1. 初始化Vite项目：

   npm init vite@latest my-vue-ssg --template vue

2. 安装SSR插件：

   

   npm install vite-plugin-ssr @vitejs/plugin-vue

3. 配置vite.config.js：

   import { createServer } from 'vite-plugin-ssr/server'
   import vue from '@vitejs/plugin-vue'
   
   export default {
     plugins: [vue(), createServer()]
   }

4. 创建页面级预渲染：

   // pages/index.page.js
   export const prerender = true
   export function getDocumentProps() {
     return { title: 'SSG Page' }
   }

关键优化技巧

• 动态路由处理：在Nuxt中配置generate.routes获取动态路径
• 数据预取：使用<script setup>中的useAsyncData（Nuxt 3）
• 混合渲染：对某些路由保留SSR，其他使用SSG
• 增量静态再生：通过API重新验证静态内容（需配合CDN）

示例动态路由配置（Nuxt）：

// nuxt.config.js
export default {
  generate: {
    routes: ['/posts/1', '/posts/2']
  }
}

部署注意事项

1. 静态托管服务：Netlify/Vercel/S3+CloudFront
2. 重定向规则：配置_redirects处理SPA回退
3. 缓存策略：设置HTML文件Cache-Control: max-age=0，静态资源长期缓存
4. 预览功能：通过npm run generate -- --dry-run检查生成结果

对于内容密集型站点，建议结合Headless CMS（如Strapi）实现内容更新后触发重新构建。