vue v-cli3 seo优化 预渲染的实现prerender-spa-plugin&vue-meta-info

预渲染的使用场景更多是我们所说的静态页面的形式。

1.依赖下载

yarn add puppeteer-core
yarn add vue-meta-info -D
yarn add prerender-spa-plugin --save

2.配置 vue.config.js

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
publicPath:  "/",
configureWebpack: config => {

       
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, 'dist'),
                    routes: ['/', '/login', '/register',],
                    renderer: new Renderer({

                        inject: {

                            foo: "bar"

                        },
                        headless: false,

                        renderAfterDocumentEvent: 'render-event'

                    })

                })

            ]

        }

    },

}

3.配置router/index.js

const router = new VueRouter({
  mode: 'history',
  //注意配置history,需要后端配置一些东西 [添加链接描述](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
  base:'/',
  routes
})

4.配置main.js

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted () { 
     /* 分发预渲染事件 */
    document.dispatchEvent(new Event('render-event'))
  }
})

5.在预渲染页面配置页面的meta 信息：关键词、描述等

export default {
//那个需要就添加这个就行
  metaInfo: {
      title: '首页',
      meta: [
          {
              name: 'keywords',
              content: '前端技术,测试一下'
          },
          {
              name: 'description',
              content: '这是关于预渲染的首页'
          }
      ]
  },
  name: 'Home',
  data() {
    return {
      name: '预渲染的实现'
    }
  }
}  

没有情调，不懂浪漫，也许这是一面，但拥有朴实无华的爱是他们的另一面。