- 作者简介：大家好，我是文艺理科生Owen，某车企前端开发，负责AIGC+RAG项目
- 目前在卷的技术方向：工程化系列，主要偏向最佳实践
- 希望可以在评论区交流互动，感谢支持~~~
如今前端技术的飞速更新，对开发的要求又上升了一个台阶（卷的飞起～），导致铺天盖地的培训班引流，短视频引流都在灵魂发问：源码你读了吗？Rust要上车吗？Langchain的风口要不要跟一波？
我：。。。
而对于绝大多数开发小伙伴来说，日常开发工作服务于业务需求，所以如何快速使用和最佳实践才是更应该关心的。（然后省出时间来卷源码）
目前公司的技术栈以Vue3为主，所以官网上的内容是最应该先通读一遍的（读源码的小伙伴，建议先通读一遍官网，再去研究源码收益会更高哦～）
官网上指出Vue3有6种使用方式，其中一种是 SSG。本着先吃透官方文档的原则，今天上车体验一下SSG。
SSG简介
SSG(Static site generation )，中文叫静态站点生成。当一个html页面中只有静态数据时，无需发送请求更新，可以进行预渲染。
我们知道，页面渲染需要消耗浏览器性能。
常见的SPA页面加载流程是： 请求下载html文件 -> 请求下载js文件 -> 页面渲染
而SSG页面 加载流程是：请求下载html文件（因为html预渲染已经在构建过程完成了）
小结：SSG技术在打包构建就会生成HTML文件，访问时直接下载就可以展示了。
SSG实践
这里会提供两个demo实现SSG。分别是 VitePress和NuxtJS。
VitePress SSG
- 首先安装node18版本（推荐用nvm管理），新建文件夹（vitepress-demo），执行下面命令安装vitepress。
pnpm add -D vitepress - 运行vitepress，根据命令行向导快速构建项目
pnpm vitepress init
- 启动项目
pnpm run docs:dev
项目启动成功界面：
- 执行项目构建
pnpm docs:build
构建完成后，会发现 .vitepress目录下多了一个dist目录，即为打包后的产物目录。而且我们会发现，根目录下的md文件和dist下的html文件有映射关系（404.html除外）。
| md文件名 | html文件名 |
|---|---|
| index.md | index.html |
| api-examples.md | api-examples.html |
| markdown-examples.md | markdown-examples.html |
vitepress使用了基于文件的路由，生成的html页面是从源md文件映射而来的。所以生成html文件可以托管在任何支持静态文件的Web服务器上。
- 运行
pnpm docs:preview，可以在本地快速启动一个本地静态web服务（默认端口号为4173），该服务以 .vitepress/dist作为源文件。
预览成功
NuxtJS SSG
- 创建一个新项目
pnpm dlx nuxi@latest init nuxt-demo
直接报错：
注意：Nuxt项目需要科学上网，但国内访问raw仍然不稳定。建议直接通过这个链接下载模版，解压后直接使用 模版地址
中间也尝试添加host，只成功1次，不稳定。相关issue
cd nuxt-demo进入项目目录，pnpm i安装依赖，pnpm dev启动项目，界面如下：
pnpm generate预渲染静态生成html文件(该命令默认为SSG模式)
从上图中看到，命令执行完成后，在根目录下生成一个dist目录，其中有index.html、200.html（负责渲染动态路由）、400.html（404错误页面）
pnpm preview预览静态生成页面，预览完成。
总结：SSG指在构建阶段生成html文件，适用于固定的静态展示内容页面。并列举了 VitePress 和 Nuxt 如何快速体验上手SSG渲染模式。
参考文献：
日拱一卒，功不唐捐。