HTML5 VUE单页应用 SEO 优化之 预渲染（prerender-spa-plugin）

前言：当前 SPA 架构流行的趋势如日中天，先后端分离的业务模式已经成为互联网开发的主流方式，可是 单页面 应用始终存在一个痛点，那就是 SEO，

对于那些须要推广，但愿能在百度搜索时排名靠前的网站而言，使用单页面应用的是没法被 百度的 蜘蛛 爬到的，为此，众多流行的 MVVM 框架都推出了

不少解决方案，有官方的也有三方的，VUE也不例外，本文章就来分享一下 vue-cli 结合 prerender-spa-plugin 插件这种预渲染的 SEO 优化解决方案

1，使用 vue-cli 建立一个项目，安装依赖 并启动 （若是不会使用脚手架建立项目或 对 VUE 框架不太熟的，建议先系统学习 VUE 基础部分在看该文章）

vue init webpack vue-prerender
cd vue-prerender
npm install
npm run dev

2，脚手架建立的项目默认会给咱们 一个 名称为 HelloWorld.vue 的主键，咱们将其内容修改成

<style scoped="scoped">

</style>
<template>
    <div class="hello">
        <router-link to="/test">/test</router-link>
    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {}
        }
    }
</script>

3，咱们在建立一个名为 Test.vue 的组建，内容以下

<style scoped="scoped">

</style>
<template>
    <div class="test">
        <router-link to="/">回到首页</router-link>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: "Test",
        data() {
            return {}
        }
    }
</script>

4，修改 src/router/index.js 路由文件以下，特别注意这里要将 mode 设置为 history 模式，目前预渲染只支持该种模式

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import Test from '../components/Test'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'Test',
            component: Test
        }
    ]
})

5，这样咱们就实现了两个互相跳转的路由，咱们能够 使用 npm run dev 命令启动项目测试一下 （src 目录结构以下）

6，测试无误后，咱们下载预加载插件 prerender-spa-plugin

npm install prerender-spa-plugin -D

7，咱们修改 build/webpack.prod.conf.js 配置文件，将预渲染插件加入进去 （咱们通常会将网站的首页 和 一些变更不大的页面作预渲染，变更频繁的页面不适合改插件）

const PrerenderSpaPlugin = require('prerender-spa-plugin')

plugins: [
        // 配置 prerender-spa-plugin 预渲染插件
        // 生成文件的路径，此处须要与 webpack 打包地址一致，因此直接使用 config.build.assetsRoot
        // 数组为 须要预渲染的 路由，基本上是首页或者 变更不大的列表页等等，目前只支持 h5 history 方式
        new PrerenderSpaPlugin(
            path.join(config.build.assetsRoot),
            ['/', '/test']
        ),
       ......

8，完成上面的步骤咱们就能够开始编译项目了

npm run build

9，编译后的 dist 目录结构以下，其中 index.html 对应路由 '/', test/index.html 对应路由 '/test'，咱们能够打开看看，里面的内容不少 

10，注意，不要直接把 index.html 拖动到浏览器访问，那样会有路径的问题，咱们能够搭建一个静态服务器来测试打包后的项目是否有效

11，咱们本着一事不烦二主的原则，就直接使用 node 的 express 框架 搭建一个静态服务器作测试使用

npm i express -D

12，咱们在项目根目录下建立一个脚本 server.js，内容以下

const path = require('path')
const express = require('express')

const app = express();
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(8080)

 

13，咱们在 package.json 文件中添加启动脚本，下面代码标红的部分为 添加的内容

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "server": "node server.js"
  },

14，启动静态服务器

npm run server

15，在浏览器中输入 localhost:8080 访问打包生成后的页面，一切 OK

  

16，优缺点分析

优势：简单易上手，相对于一些须要服务器渲染的方式如 vue 官方的 vue-ssr，该方法最终将代码打包成静态资源，能够部署到任何服务器上，不依赖于服务器就能知足 SEO 的要求

缺点：只支持 h5 history，而且不太适合变更较频繁的页面