vue SSG实现
Vue SSG（静态站点生成）实现方法
Vue SSG（Static Site Generation）通过预渲染将Vue应用转换为静态HTML文件，提升加载速度和SEO友好性。以下是具体实现方案：
使用VuePress
VuePress是Vue驱动的静态站点生成器，适合文档类网站：
- 安装VuePress：
npm install -D vuepress - 创建基本结构：
mkdir docs && echo '# Hello VuePress' > docs/README.md - 在
package.json中添加脚本：{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
使用Nuxt.js
Nuxt.js提供开箱即用的SSG支持：
- 创建Nuxt项目：
npx create-nuxt-app my-ssg-project - 配置
nuxt.config.js启用SSG：export default { target: 'static' // 启用静态生成模式 } - 使用
asyncData或fetch获取数据：export default { async asyncData({ params }) { return { post: await fetchPost(params.id) } } } - 生成静态文件：
npm run generate
使用Vite + vite-plugin-ssr
对于自定义SSG方案：
-
初始化Vite项目：
npm init vite@latest my-vue-ssg --template vue -
安装SSR插件：
npm install vite-plugin-ssr @vitejs/plugin-vue -
配置
vite.config.js：import { createServer } from 'vite-plugin-ssr/server' import vue from '@vitejs/plugin-vue' export default { plugins: [vue(), createServer()] } -
创建页面级预渲染：
// 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']
}
}部署注意事项
- 静态托管服务：Netlify/Vercel/S3+CloudFront
- 重定向规则：配置
_redirects处理SPA回退 - 缓存策略：设置HTML文件
Cache-Control: max-age=0，静态资源长期缓存 - 预览功能：通过
npm run generate -- --dry-run检查生成结果
对于内容密集型站点，建议结合Headless CMS（如Strapi）实现内容更新后触发重新构建。
