Vue静态站点生成-Gridsome基础

阅读建议：建议通过左侧导航栏进行阅读
文章简介：本文是学习Gridsome的学习笔记

静态网站生成器

定义：静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具。
特点：

• 由于是提前生成静态HTML文件及相关资源，所以也叫预渲染
• 生成的网站不需要服务器，只需要放到支持静态资源的web server 或 CDN即可运行

优势：

• 省钱-不需要专业的服务器，只要能托管静态文件的空间
• 快速-不经过后端服务器的处理，只传输内容
• 安全- 没有后端程序的执行，会更安全

常见的静态网站生成器：

• 基于Ruby的JekyII
• 基于Node.js的Hexo
• 基于GoLang的Hugo
• 基于Node/React的Gatsby
• 基于Node/Vue的Gridsome
• Next.js和Nuxt.js也能生成静态网站，但是他们更多的被认为是服务端渲染（SSR）框架

这类静态网站生成器统称JAMStack（JAM指JavaScript、API、Markup），通过调用各种API来实现更多的功能，其本质是一种前后端分离的模式，甚至前后端可以来自不同的厂商。

使用场景：

• 不适合有大量路由页面的应用，路由页面过多，则预渲染会非常慢
• 不适合有大量动态内容的应用

Gridsome

学习GridSome要有Vue基础，但比Vue简单，参考官方文档

资源链接：

• Gridsome官网
• sharp官网
• sharp：Github地址
• libvips：Github地址
• node-gyp：Github地址

创建Gridsome项目

环境准备：Node.js（v8.3 +）环境、C++编译环境、Python环境

使用Gridsome脚手架创建项目时，处理图片（如压缩图片的大小、转换图片的格式）依赖的sharp包很难安装成功，主要原因有两点：
1、里面包含一些C++文件，在安装的时候需要先编译，要有C++编译环境
2、依赖的libvips几十兆，比较大

1、安装Gridsome脚手架工具

npm install --global @gridsome/cli

2、准备sharp的安装环境

不管是哪个是哪个操作平台（Windows、Linux）,都需要有python环境，windows环境可以通过Windows应用商店安装。

• 在sharp官网找到国内镜像，安装国内镜像

//安装sharp镜像
npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
//安装libvips镜像
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"

• 安装C++编译环境
  • 下载Python安装包，安装Python环境
  • 安装node-gyp及相关套件windows-build-tools，它的作用是编译C++扩展包

//安装node-gyp
npm install -g node-gyp

//安装windows-build-tools
npm install --global windows-build-tools

3、创建Gridsome项目，并安装依赖包

gridsome create sample-gridsome

npm scripts命令

"scripts": {
   
  "build": "gridsome build", //编译构建预渲染静态网页
  "develop": "gridsome develop", //本地启动项目
  "explore": "gridsome explore"
},

4、本地执行npm run develop启动项目，浏览器访问http://localhost:8080/，页面如下：

5、本地执行npm run build编译构建预渲染静态网页，生成的静态网页在dist目录下，可以将它部署在任何支持静态文件的web服务器上。

6、使用serve插件本地部署测试打包后的文件

serve是一个基于node.js的命令行静态web服务

//安装serve
npm install -g serve

项目根目录下执行 serve dist启动本地服务，如下图表示启动成功：

目录结构

详见Gridsome官方文档