Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info

Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info

prerender-spa-plugin配置
安装
执行npm i prerender-spa-plugin即可
prerender-spa-plugin插件是需要依赖puppeteer的，也就是谷歌出品的无头浏览器插件，这个插件会下载最新版的chromium(大约200M+），所以如果不能翻墙，下载的时候就报错了

webpack中配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
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'
        }),
        
        // 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
        new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            // 下面这句话非常重要！！！
            // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
            staticDir: path.join(__dirname, '../dist'),
            
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/', '/index', '/skin', '/slimming', '/exercise', '/alPay', '/wxPay'],
            
            // 这个很重要，如果没有配置这段，也不会进行预编译
            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,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

prerender-spa-plugin 的确在一定程度上解决了我们对于 SEO 的诉求和页面加载慢的问题。但是它的缺点还是很明显的。
不同的用户看到不同的页面，动态数据页面（预渲染在获取用户权限数据之前就进行渲染了，所有他不能做到这个）
动态路由也不可以（webpack编译的时候 路由还没挂载那）
经常发生变化的页面，数据实时性展示（比如体育比赛等 我们现在的方式是前端拿到组件后进行组装数据，然后在进行渲染 像这种实时数据的会不准确）
路由过多，构建时间过长

vue-meta-info配置

main.js配置

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

//要添加TDK的组件中配置
metaInfo: {
    title: '我是标题', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是关键字'
    },

这样再结合prerender-spa-plugin，打包之后，在dist文件夹找到contact文件夹下的index.html
打开你会发现就有title和meta的关键字和描述标签了