• 作者简介：大家好，我是文艺理科生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

1. 首先安装node18版本（推荐用nvm管理），新建文件夹（vitepress-demo），执行下面命令安装vitepress。
   pnpm add -D vitepress
2. 运行vitepress，根据命令行向导快速构建项目
   pnpm vitepress init

3. 启动项目
   pnpm run docs:dev

项目启动成功界面：

4. 执行项目构建
   pnpm docs:build

构建完成后，会发现 .vitepress目录下多了一个dist目录，即为打包后的产物目录。而且我们会发现，根目录下的md文件和dist下的html文件有映射关系（404.html除外）。

vitepress使用了基于文件的路由，生成的html页面是从源md文件映射而来的。所以生成html文件可以托管在任何支持静态文件的Web服务器上。

5. 运行 pnpm docs:preview，可以在本地快速启动一个本地静态web服务（默认端口号为4173），该服务以 .vitepress/dist作为源文件。

预览成功

NuxtJS SSG

1. 创建一个新项目pnpm dlx nuxi@latest init nuxt-demo
   直接报错：
   

注意：Nuxt项目需要科学上网，但国内访问raw仍然不稳定。建议直接通过这个链接下载模版，解压后直接使用 模版地址
中间也尝试添加host，只成功1次，不稳定。相关issue

2. cd nuxt-demo 进入项目目录，pnpm i安装依赖，pnpm dev启动项目，界面如下：

3. pnpm generate 预渲染静态生成html文件(该命令默认为SSG模式)

从上图中看到，命令执行完成后，在根目录下生成一个dist目录，其中有index.html、200.html（负责渲染动态路由）、400.html（404错误页面）

4. pnpm preview 预览静态生成页面，预览完成。

总结：SSG指在构建阶段生成html文件，适用于固定的静态展示内容页面。并列举了 VitePress 和 Nuxt 如何快速体验上手SSG渲染模式。

参考文献：

1. FE Jargon you should know – SSG,  SSR,  CSR,  VDOM
2. Nuxt中文官网
3. VitePress官网

日拱一卒，功不唐捐。

原文链接：https://juejin.cn/post/7357289817128452146 作者：文艺理科生