周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的 SSR代码,所以准备采用预渲染,本来想着网上有这么多 预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末… 这篇文章就记录一下最后是怎么配置的 T.T
声明:
- 以下配置只保留有必要的
- 生成目录这里使用
base
代替,请自行修改 - vue-cli模板使用
webpack
,其他模板类推 - webApp - 在线预览
- Github - 配置了预渲染的demo
感兴趣的同学可以加文末的微信群,一起讨论吧~
1. 简介与使用场景
我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering)、预渲染(Prerending)。
如果你只需要改善少数页面(例如 /
, /about
, /contact
等)的 SEO
,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML (服务端渲染, SSR),而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。它主要使用 prerender-spa-plugin 插件,其与SSR一样都可以加快页面的加载速度,并且侵入性更小,在已上线的项目稍加改动也可以轻松引入预渲染机制,而SSR方案则需要将整个项目结构推翻;
访问预渲染出来的页面在访问时与SSR
一样快,并且它将服务端编译HTML的时机提前到了构建时,因此也降低了服务端的压力,如果你的服务器跟我的一样买的 1M1G1核 的小水管服务器 ( 穷 ),那么预渲染可能更适合你。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站,比如电商网站。
2. 安装配置
首先来看看相关技术栈:vue2.5.2、vue-router3.0.1、vue-cli2.9.6、webpack3.6.0、prerender-spa-plugin^3.3.0
2.1 安装
安装跟其他库一样
# Yarn
$ yarn add prerender-spa-plugin -D
# or NPM
$ npm install prerender-spa-plugin --save-dev
2.2 前端配置
首先看看文件结构,用的是vue-cli2的webpack模板生成的文件结构
│ .babelrc
│ index.html
│ package.json
│ README.md
├─build
│ build.js
│ check-versions.js
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
├─config
│ dev.env.js
│ index.js
│ prod.env.js
├─src
│ │ App.vue
│ │ main.js
│ │
│ ├─assets
│ ├─components
│ ├─router
│ │ index.js
│ ├─styles
│ ├─utils
│ └─views
│ BigData.vue
│ CompanyHonor.vue
然后是router/index.js的配置,预渲染要求是histroy模式,有的文章说不需要history模式,这是错的,否则生成的页面都是同一个html。另外注意加上base
否则如果你希望跳转到二级页面的localhost/base/home
时候,在页面中点击<router-link to="/hom