vue项目使用预渲染 进行seo优化

vue项目使用预渲染 进行seo优化

vue进行seo优化的两个方法
1.预渲染***
针对项目其中几个页面的seo，标题不能通过接口数据动态渲染 情况使用
使用以下两个插件进行预渲染seo优化：
npm install prerender-spa-plugin --save
npm install vue-meta-info --save

//main.js中引入

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

// 需要seo的.vue文件中 与data平级 配置title和meta数据

  metaInfo: {
    title: '这是标题这是标题这是标题', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是contact关键字我是contact关键字我是contact关键字我是contact关键字'
    },
    {
      name: 'description',
      content: '这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述'
    }],
    // link: [{ // set link
    //   rel: 'asstes',
    //   href: 'https://www.baidu.com/'
    // }]
  },

再vue.config.vue中配置 plugins插件 里面有一个toutes 根据自己需要seo的组件，往里面添加

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')

module.exports = {
    lintOnSave: false ,//关闭eslint检查,
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，需要写成就 /a/param1。
          routes: ['/login',  '/home'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
          })
        })
      ]
    }
  },
}

vue实例中添加我这里面的mounted

	new Vue({
  store,
  router,
  render: h => h(App),
  created(){
    store.commit("addMenu", router);
  },
  //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
   /* 这句非常重要，否则预渲染将不会启动 */ 
   mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

上面配置好后执行打包指令 npm run build
在dist文件夹里，能看到你添加的路由组件名字，从这文件的html文件进去有你配置的title且有很多页面的标签就成功了

2.ssr服务器渲染
使用nuxt，这是一个基于vue开发的前端框架
针对项目每个页面都进行seo,标题和内容可以用nuxt服务器生命钩子进行动态渲染
这个我没用过，不过多描述