hualinux 进阶 vue 3.3：静态化站及相关vue静态化工具介绍

目录

一、为什么要静态化优缺点

1.1 优点

1.1.1  提高速度

1.1.2 搜索引擎的收录

1.1.3 安全性

1.1.4  网站稳定性

1.1.5 缓存加速

1.2 缺点

二、vue相关的静态化工具

2.1 Nuxt.js——34000 星和 280+贡献者

2.1.1 介绍（有中文）

2.1.2 优点

2.1.3 缺点

2.2 VuePress——针对以内容为中心的静态站点优化

2.2.1 介绍（有中文）

2.2.2 优点

2.2.3 缺点

2.3 Gridsome——带有 GraphQL 的数据驱动框架

2.3.1 介绍（有中文）

2.3.2 优点

2.3.3 缺点

2.4 Saber——从不同的文件系统提取数据

2.4.1 介绍

2.4.2 优点

2.4.3 缺点

2.5 总结

---

讲到了vue路由，不得不顺带说一下网站静态化。我也会介绍一些vue静态化的工具。

一、为什么要静态化优缺点

1.1 优点

1.1.1  提高速度

比如jsp这一类的动态网页，需要进行数据库查询，这时访问量增加，数据库查询的次数也会随之增加，会占用很大的资源，影响到网站的反应速度。如果把首页、内容静态化的话，就会去除了查询数据库的次数，减少一部分环节，加快网站反应速度。

1.1.2 搜索引擎的收录

从网站的优化上来说，搜索引擎更喜欢静态网页，也容易进行抓取，SEO排名也会更高。比如百度、阿里巴巴、搜狐都使用静态网页或者伪静态网页来显示，方便搜索引擎的抓取与排名。

1.1.3 安全性

静态网页不容易被黑客所攻破。静态网页没有查询数据库，不会让黑客看到数据库里的内容。

1.1.4  网站稳定性

如果后台程序、数据库等出现错误，影响网站的访问，影响用户的体验度，降低了用户的信任度，而静态网页就不会出现这种情况。
 

1.1.5 缓存加速

静态化后，可以放进缓存中。也可以使用CDN缓存在各个节点上，这样访问的速度更快。

1.2 缺点

交互性差，功能上有限制。
增加网站的开发复杂度，不利于程序维护和管理。
占用硬盘空间大。
不灵活，静态化操作需要开关的，需要我们专门的设计。

 

二、vue相关的静态化工具

React 这边的 Gatsby 和 NextJS 一样，Vue.js 这边支持静态网站生成的框架也有不少。但考虑到它们提供的众多功能，想要挑一个合适的并不容易。

我会向大家介绍用于静态站点生成的四大 Vue.js 框架，并对它们做详细对比，帮助找到适合你用例的选项。

2.1 Nuxt.js——34000 星和 280+贡献者

2.1.1 介绍（有中文）

名单上的第一个是 Nuxt.js，这是一个基于 Vue.js 构建的开源高级框架。Nuxt.js 会抽象出客户端-服务器分发细节，从而简化 Web 开发工作。

Nuxt.js 基于一个可靠的模块化架构，并且有 50 多种模块方便用户入门。这些模块提供了内置支持，以将 PWA 特性和标准功能（例如 Google Analytics）引入你的应用程序。

Nuxt.js 的最大优势之一是 nuxt generate 命令。

使用这个命令时，你可以轻松生成网站的完全静态版本。

 至于 Nuxt.js 的相关数据，它拿到了超过 34000 个星星，有 280 多位贡献者。像 GitLab、NESPRESSO 和 UBISOFT 这样的公司已经开始使用 Nuxt.js 了。