Vue.js——单页应用(SPA)如何进行SEO优化

前言
SEO(Search Engine Optimization)，即搜索引擎优化。权威的解释是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。具体到怎么实现，就是通过在网页上内嵌一些meta属性来达到更好地被搜索引擎爬取关键信息，从而提升自身的搜索排名。

单页应用（Single Page Application）

由Vue-Cli打包生成的网站的文件就是单页应用，它只有一个Index.html文件。显然如果需要对网站进行SEO优化，网站存在多个页面的情况，但是只有一个网页会存在meta标签，这对于需要进行SEO优化的需求者来说是完全不够的。那么这是否意味着我们需要放弃使用Vue、React之类的框架，而去使用原生的方式进行开发？答案是否定的。既然存在这样的需求，那么肯定有解决的方法！
Vue官网上提供了两种解决方案：

• 使用预渲染的方式对网页的路由指定模板
• 使用服务端渲染SSR

今天，我们只讲预渲染实现SEO优化

prerender-spa-plugin 插件

Vue实现预渲染的方式是通过prerender-spa-plugin插件实现。

Vue-Cli 3.0 安装

• 在终端中输入vue ui指令进入可视化的项目管理页面。
• 在项目管理页面中，选择插件一项，搜索vue-cli-prerender-spa，点击安装。
  

Vue-Cli 2.0 安装

• 在项目文件下，打开终端输入npm install --save prerender-spa-plugin
• 打开webpack.prod.conf.js，添加如下配置：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')   //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        // vue-cli生成的配置中就已有这个了，不要动
        new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        }),
        // 配置PrerenderSPAPlugin
        new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            staticDir: path.join(__dirname, '../dist'),
            
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/', '/product','/about','/contact','/join','/jzjh'],
           
            // 这个很重要，如果没有配置这段，也不会进行预编译
            renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
        })
    ]
})

• 在main.js中，添加如下代码

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

需要注意的是无论是Vue-Cli 3.0或2.0创建的项目都要将路由的mode设置为history!

安装 vue-meta-info

• 在项目文件目录下，打开终端输入 npm install --save vue-meta-info
• 在main.js文件中，引入并使用vue-meta-info

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

• 在需要SEO优化的组件（理论上应该是路由组件）的Script标签中进行配置

metaInfo: {
  title: '我是title',
  meta: [
    {
      name: 'keywords',
      content: '关键字1,关键字2'
    },
    {
      name: 'description',
      content: '网页的描述'
    }
  ]
}

附上参考的两篇文章：
https://www.cnblogs.com/kdcg/p/9606302.html
https://www.jianshu.com/p/6a4c0b281e7f