美文网首页vue
Vue项目SEO优化[预渲染方案]

Vue项目SEO优化[预渲染方案]

作者: 木易先生灬 | 来源:发表于2020-09-04 09:54 被阅读0次

    Vue预渲染

    获得服务端渲染的优点
    对特定路由生成静态HTML文件,前端作为一个完全静态的站点
    无需使用web服务器实时动态编译HTML
    改善少数页面的SEO,可采用预渲染
    若网站有成百上千条路线,预编译会非常缓慢(此情况慎用)

    vue-meta-info插件,网页meta标签

    安装:yarn add vue-meta-info

    main.js中进行配置

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

    在xxx.vue文件里配置

    export default {
        // 这些代码会转成网页的meta标签里的内容
        metaInfo: {
            title: '标题',
            meta: [
                {
                    name: 'keywords',
                    content: '关键字'
                },
                {
                    name: 'description',
                    content: '网页描述'
                }
            ]
        }
    

    预渲染核心:prerender-spa-plugin

    安装:yarn add prerender-spa-plugin

    build/webpack.prod.conf.js中进行配置

    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    
    // plugins插件里书写
    plugins: [
       new PrerenderSPAPlugin({
          // 生成文件的路径,这个目录只能有一级。若目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动
          staticDir: path.join(__dirname, '../dist'),
          // 对应自己的路由文件
          routes: [ '/', '/home'],
          // html文件压缩
          minify: {
            minifyCSS: true, // css压缩
            removeComments: true // 移除注释
          },
          // 若没有这段则不会进行预编译
          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,
      store,
      //   components: { App },
      //   template: '<App/>'
      render:h=>h(App),
      mounted(){
          document.dispatchEvent(new Event('render-event'))
      }
    })
    
    注意:官方文档上 路由模式必须为 history 。如果不设置history模式,也能运行和生成文件,每个index.html文件的内容都会是一样的。所以必须使用 history模式

    相关文章

      网友评论

        本文标题:Vue项目SEO优化[预渲染方案]

        本文链接:https://www.haomeiwen.com/subject/bwtzsktx.html