Vue项目的SEO优化方案

问题描述：

在使用VueJs开发项目的时候，由于单页面工程（SPA）的特点，最终只会输出一个HTML文件，不利于搜索引擎优化，对于一些依赖搜索推广的项目来说，存在较大痛点。而传统JS+HTML在效率、可维护性、项目性能上又不及框架，所以在这种情况下，我们需要针对框架给出解决方案，兼顾开发效率和SEO

方案一：SSR服务端渲染

vue项目可以使用Nuxt.js，Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。 但是对于一个已经成型的项目来说，改造成本较大，所以本文着重介绍第二种方案。

方案二：预渲染（推荐）

原理：利用库 prerender-spa-plugin + vue-meta-info 配置webpack和页面实现预渲染方案，最终build出来多个html文件

特点：较容易实现，改动较小，较为可控

缺点：不支持动态路由的使用，还有就是install和build时间会比较长

注意：必须是history模式

1.下载所需库文件

npm install vue-meta-info --save
npm install prerender-spa-plugin --save

2.main.js

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

3.配置webpack

避坑提示：配置中的injectProperty属性有神奇的用处，可以帮您解决一些疑惑的问题

预编译环境下：window.__PRERENDER_INJECTED === undefined

线上运行环境：window.__PRERENDER_INJECTED === inject配置的值

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
  new PrerenderSPAPlugin({
    // 必需 - 要预渲染的 webpack 输出应用程序的路径
    staticDir: path.join(__dirname, '/dist'),
    // 必需 - 要渲染的路由。
    routes: [
      '/index',
      '/home',
      '/login',
    ],
    // 预渲染代理接口
    // server: {
    //   proxy: {
    //     '/api': {
    //       target: 'http://localhost:9001',
    //       secure: false
    //     }
    //   }
    // },
    // 渲染器
    renderer: new Renderer({
      // 可选 - 要添加到包含 `inject` 内容的 window 对象的属性名称。
      injectProperty: '__PRERENDER_INJECTED',
      // 可选 - 您希望您的应用程序可以通过 `window.injectProperty` 访问的任何值。
      inject: {
        foo: 'bar'
      },
      headless: true, // 渲染时显示浏览器窗口。用于调试
      renderAfterDocumentEvent: 'render-event' // 对应main.js中的事件名
    })
  }),
}

4.将需要预渲染的页面配置SEO文字内容（对应上面routes数组里路由指向的页面）

export default {
  metaInfo: {
    title: '我是 index 页面的title',
    meta: [
      {
        name: 'keywords',
        content: '我是 index 页面的keywords'
      },
      {
        name: 'description',
        content: '我是 index 页面的description'
      }
    ]
  },
}