VUE SEO 优化 预渲染 动态meta

TIPS：需要做seo的页面多的话还是直接用nuxt（服务端渲染）吧，vue迁移过去很快

预渲染 npm install prerender-spa-plugin --save

// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
    chainWebpack: (config) => {
        config.plugin('prerender').use(PrerenderSPAPlugin, [
          {
            staticDir: path.join(__dirname, 'dist'),
            routes: [
              '/',
              '/advertisement',
            ],
            renderer: new Renderer({
              headless: true,
              renderAfterDocumentEvent: 'render-event',
            }),
          },
        ])
    }
}

//app.vue
mounted () {
    document.dispatchEvent(new Event('render-event'))
}

npm run build出来的区别

npm install vue-meta-info --save

// main.js
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
// xx.vue
export default {
     metaInfo: {
        title: '',
        meta: [{
          name: 'keywords', // 设置关键字
          content: ''
        },
        {
          name: 'description', // 设置页面描述
          content: ''
        }],
        link: [{ // 设置link
          rel: 'asstes',
          href: 'https://yunyinsoft.com/'
        }]
      }
}