当前位置：首页 > VUE

vue SSG实现

2026-01-07 18:01:23VUE

Vue SSG 实现方法

Vue 的静态站点生成（SSG）可以通过多种工具和框架实现，以下是几种常见的方法：

使用 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"
  }
}

运行 npm run docs:build 生成静态文件到 docs/.vuepress/dist。

使用 Nuxt.js

Nuxt.js 支持 SSG 模式，通过配置 nuxt.config.js 实现。

安装 Nuxt.js：

npx create-nuxt-app my-ssg-app

在 nuxt.config.js 中设置 target: 'static'：

export default {
  target: 'static'
}

运行生成命令：

npm run generate

生成的静态文件默认输出到 dist 目录。

使用 VitePress

VitePress 是 VuePress 的替代品，基于 Vite 构建，速度更快。

安装 VitePress：

npm install -D vitepress

创建文档结构并运行开发服务器：

mkdir docs
echo '# Hello VitePress' > docs/index.md
npx vitepress dev docs

构建静态文件：

npx vitepress build docs

自定义 SSG 实现

对于需要高度定制的场景，可以手动实现 SSG。使用 vue-server-renderer 渲染 Vue 组件为 HTML。

安装依赖：

npm install vue vue-server-renderer

创建渲染脚本：

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = new Vue({
  template: '<div>Hello SSG</div>'
})

renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
})

将输出的 HTML 保存为静态文件。

部署 SSG 站点

生成的静态文件可以部署到任何支持静态文件的托管服务，如 Netlify、Vercel 或 GitHub Pages。

Netlify 部署示例：

将代码推送到 GitHub 仓库。
在 Netlify 中导入仓库，构建命令设置为 npm run generate 或对应的构建脚本。
发布站点。

动态内容处理

对于需要动态数据的 SSG 站点，可以在构建时通过 API 获取数据并预渲染。Nuxt.js 的 asyncData 或 VuePress 的插件系统支持此功能。

Nuxt.js 示例：

export default {
  async asyncData({ params }) {
    const data = await fetch('https://api.example.com/data').then(res => res.json())
    return { data }
  }
}

构建时会调用 asyncData 并预渲染页面。

vue SSG实现