使用 Nuxt.js 发布纯静态网站

TIP

新作创作中

时隔三年,Nuxt.js v3 已经发布,我也在创作新的 Nuxt.js 网站教程,敬请期待。

代码仓库:https://github.com/meathill/mui-resume 欢迎关注。

前言

如果开发需要复杂交互的 Web 应用,我们多半会选择 SPA;如果要做提供内容资讯的网站,更有利于 SEO、加载速度更快的服务器端渲染(Server-Side Rendering,SSR)自然是大家的首选;那么,如果是一个 CMS 生成纯静态网页呢?

前阵子公司官网升级,我尝试用 Webpack 多页配置,成功的升级了工具链,收获了比较理想的效果。我还写了一篇 Chat 分享这期间的收获:《升级工具链吧!使用 Webpack 开发企业官网》open in new window。实际运行一阵子之后,我发现一些新问题:这套技术链对于非前端开发者来说,还真算不上简单,开发环境搭建、不同文件的功用,对后端同事来说仍然显得很复杂。于是,有时候虽然只是小小的文案错误,也要找我来改;或者“加入我们”页面里的岗位信息,也需要熟悉代码的前端负责增删。

于是我就想,能否把各页面以 Vue 组件的形式搭建起来,每个组件可以有“编辑/显示”两个状态,在本地启动开发环境,在浏览器里“编辑”内容,用户可以获得所见即所得的体验。最后以“显示”状态渲染成静态页,继续使用纯静态的方式部署。这就相当于,基于原先的项目开发一个所见即所得 CMS,把原先的静态 HTML(或 Pug)页面改造成 Vue 页面,然后利用 Vue 的 SSR 机制发布成纯静态 HTML。感觉上是个不错的想法。

我以前只是听说过 SSR,一直没有实操经验,有了这个想法之后,就想研究下这个过程,搞个最小用例,将来官网升级 3.0 的时候可以考虑。我本以为只是举手之劳,最多 1,2 个小时就搞定了,没想到最后折腾了大半天。所以我觉得,很有必要再写一篇 Chat,分享这个过程中的收获。

本次分享大纲如下:

  1. 网页形态的历史
  2. Vue CMS 的产品形态
  3. 了解 Nuxt.js
  4. 生成静态页的相关配置
  5. 添加 SEO 关键信息
  6. 注入专有 JS

面向读者

  1. 初中级开发者,熟悉 Vue
  2. 希望了解前端工具链
  3. 希望了解静态化和 Nuxt.js

名词及约定

我假定所有读者都是有一定经验的开发者,大家至少都具备:

  1. 能读懂 JavaScript
  2. 了解 Vue,使用过 Vue 开发项目
  3. 知道 Webpack,了解前端工具链中各工具的角色和基础用法

其它约定:

  1. 为节省时间,范例代码中的 HTML 会以 pug 书写,这种语言很容易阅读,文中也用不到高级语法,应该问题不大。另外,如果你还在写原生 HTML 或 CSS,我建议你尽快切换到新语言。
  2. 范例代码以 ES6+ 为基础,如果你对这些“新”语法不熟悉,附录里有一些资源方便你学习。

名词:

  1. SEO:搜索引擎优化。指改进网页,让搜索引擎更容易理解它的内容,提高页面的排名。
  2. CMS:发布系统。没有特指的话,特指本文中发布静态页的工具。

文中代码的目标环境:

  1. Vue >= 2.6
  2. Vue-router >= 3.1
  3. Nuxt.js >= 2.8

作者介绍

大家好,我叫翟路佳,花名“肉山”,这个名字跟 Dota 没关系,从高中起伴随我到现在。

我热爱编程,喜欢学习,喜欢分享,从业十余年,投入的比较多,学习积累到的也比较多,对前端方方面面都有所了解,希望能与大家分享。

我兴趣爱好比较广泛,尤其喜欢旅游,欢迎大家相互交流。

我目前就职于 OpenResty Inc.,定居广州。

你可以在这里找到我:

或者通过 邮件 联系我。


限于个人能力、知识视野、文字技术不足,文中难免有疏漏差错,如果你有任何疑问,欢迎在任何时间通过任何形式向我提出,我一定尽快答复修改。

GitHub issueopen in new window

再次感谢大家。