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 了。

2.1.2 优点

• 优化支持。

• 服务端渲染。

• 快速的开发和运行时。

• 定义良好的项目结构。

• 支持无服务器静态站点生成。

• 自动代码拆分。

2.1.3 缺点

• 使用自定义库可能会遇到挑战。
• 报告的很多问题涉及了调试的便利性。
• 它的社区很大，但仍落后于 Gatsby 和 Next.js

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

2.2.1 介绍（有中文）

VuePress 是另一个基于 Vue.js 的静态站点生成器，它最初是作为文档生成系统开发的。但在 1.x 版发布之后，VuePress 演变成了静态文件生成器。

在 VuePress 中，每个页面都被视为一个 markdown 文件，它们被渲染为 HTML 页面，并在加载页面时充当一个单页应用程序。

根据他们的官方文档，VuePress 包含两个主要部分：

1. 带有基于 Vue.js 主题系统的静态站点生成器。

2. 插件 API，用于添加全局级别的功能，还有一个针对文档优化的默认主题。

对比 VuePress 与 Nuxt.js 的话，我们可以看到 Nuxt.js 几乎可以完成 VuePress 能够完成的所有工作。

但是，VuePress 针对以内容为中心的静态网站创建做了更多优化，而 Nuxt.js 则更多专注于 Web 应用程序开发。

GitHub 统计数据这块，VuePress 的存储库有超过 17800 个星和 340 多位贡献者。FinTech、IADC 和 Directus 等公司也在使用它。

2.2.2 优点

• 更好的加载性能。
• SEO 友好。
• 提供内置的 markdown 扩展。
• 包括强大的搜索插件、PWA 功能、Google Analytics 等。
• 默认处理 markdown 到 HTML 的转换任务。

2.2.3 缺点

• 相对较新，不像 Nuxt.js 那么成熟。

• 大多数共享托管提供商并没有安装 VuePress。

 

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

2.3.1 介绍（有中文）

我们名单上的第三位选手是 Gridsome，它以构建轻巧快速的静态网站而闻名。与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。

GraphQL 充当 Gridsome 的内容管理系统。

你可以使用 gridsome develop 命令在本地运行项目，以在 localhost:8080/___explore 处浏览这个 GraphQL 数据层。

同样，你可以使用 gridsome build 来构建你的网站，它将生成可用于生产环境的优化版 HTML 文件。

至于 Gridsome 的 GitHub 统计数据，它只有 7500 个星和 100 位孤单的贡献者。此外，Gridsome 还带有一些独特的功能，以同其他产品更好地竞争。

2.3.2 优点

• 通过热重载，轻松进行本地开发设置。

• 提供开箱即用的代码拆分、资产优化和渐进式图像，以提高性能。

• PWA 准备就绪。

• SEO 友好。

• 定义良好的结构和自动化路由。

• 丰富的插件。

2.3.3 缺点

需要具备 GraphQL 的基础知识。
相对较新，不像 Nuxt.js、VuePress 那么成熟

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

2.4.1 介绍

Saber.js 是另一个静态站点生成器，其具备大量内置功能。

用过一段时间的 Saber.js 后，我觉得它更像是 Gatsby、Gridsome 和 Nuxt.js 的组合。

与 Gatsby 和 Gridsome 类似，Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber，你就不用操心 GraphQL 了。

Saber 将其文件系统用作路由 API（这和 Nuxt.js 非常像），并且具有高度可扩展性。尽管 Saber 目前仅支持 Vue.js，但它的团队也计划扩展对 React 的支持。

由于 Saber 仍然是这一领域的新手，因此它的 GitHub 存储库只拿到了 2000 星。我相信一旦这个框架稳定下来，这些数字就会有所改善。

2.4.2 优点

• 自动代码拆分。
• 基于文件系统的路由。
• 热代码重载。
• 内置的 Markdown 支持。
• 支持 i18n。

2.4.3 缺点

• 没有 CLI。

 

2.5 总结

对于静态站点生成器领域来说，React 曾是人们的首选，并且统治了这一市场。但是，Vue.js 与我们上面讨论的这些出色框架有望改变这种情况。此外，其中一些框架对基于 React 的框架构成了真正的威胁。

例如，Gatsby 和 Gridsome 的行为看起来非常接近。此外，Gridsome 在性能、学习曲线、社区规模等方面都能与 Gatsby 相提并论。

对比基于 Vue.js 的和基于 React 的静态站点生成器，我们可以看到 Nuxt.js、VuePress 和 Gridsome 等框架具有与 Gatsby 和 NextJS 竞争的实力。

在对比以上四个框架时，根据 GitHub 和 npmtrends.com 的统计数据，可以看到 Nuxt.js 和 VuePress 处于领先地位。

但我们应该注意的是，这些框架中的每一个都有自己独特的功能。例如，Saber 计划扩展对 React 的支持，因此有可能成为全球热门产品。