+
80
-

vue如何做到seo友好?

vue
vue如何做到seo友好?

网友回复

+
0
-

有两款插件推荐使用

一、prerender-spa-plugin

npm install prerender-spa-plugin --save vue.config.js
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 = {
  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: ['/testData',  '/contact'],
          // 这个很重要,如果没有配置这段,也不会进行预编译
          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获取页面的时机
          })
        })
      ]
    }
  },
}

staticDir 指的是预渲染输出的页面地址,

routes 指的是需要预渲染的路由地址,

renderer 则是所采用的渲染引擎是什么,目前用的是 V3.4.0 版本支持 PuppeteerRenderer。

inject 则是预渲染过程中都能拿到的值,该值提供给你了机会,让你觉得是否渲染这部分代码。例如下面的代码,是不会被预渲染进 HTML 中的。
showMessage(){
      if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return;
      this.message = '我是测试预加载拦截';
    }
renderAfterDocumentEvent 这个则很关键,这个是监听 document.dispatchEvent 事件,决定什么时候开始预渲染 main.js
new Vue({
  router,
  store,
  render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

然后就是npm run build打包

1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面,所以一定要history

2.打包之后上传到服务器才可以看到效果,或者本地自己创建一个服务

这样dist的文件夹目录结构就会变成如下的样子

就是打包之后,每个路由都会打包成一个文件夹,都有一个对应的静态 HTML; 每一个 HTML 内除了
<div id="app"></div>
这个 Vue 的挂载元素外,还有静态的标签内容。
   <body>
      <div id="app">
        <div data-v-fa8a7bc4="" class="app-wrapper openSidebar">
          <section data-v-2c0baa24="" data-v-fa8a7bc4="">
            <div data-v-2c0baa24="">
              <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span class="el-breadcrumb__item"><span
                    role="link" class="el-breadcrumb__inner is-link">首页</span><span role="presentation"
                    class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
                    class="el-breadcrumb__inner">活动管理</span><span role="presentation"
                    class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
                    class="el-breadcrumb__inner">活动列表</span><span role="presentation"
                    class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"
                  aria-current="page"><span role="link" class="el-breadcrumb__inner">活动详情</span><span role="presentation"
                    class="el-breadcrumb__separator">/</span></span></div>
            </div>
          </section>
        </div>
      </div>
      <script src="config/config.js"></script>
      <script src="/static/js/chunk-vendors.cb183907.js"></script>
      <script src="/static/js/app.83e704ba.js"></script>
    </body>

遇到的问题

1.本地起服务测试,会发现能正常运行,但是做了优化的页面刷新之后会没有样式

造成问题的原因就是打包的时候vue.config.js的资源路径配置不对

没有优化之前的路径是

  publicPath: './',

打包之后路由下面的资源路径是这样的

解决办法

优化之后的路径是

publicPath: '/',

打包之后的路由下面的资源路径是这样的

就是路径前面多了一个/,采用了绝对路径

这个时候需要一个服务来测试

1.全局安装node.js

2.安装成功后,执行npm install anywhere -g 安装anywhere,

ok,那么怎么为这些打包的静态页面分配title和meta标签?需要用到 vue-meta-info

二、vue-meta-info

npm install vue-meta-info --save

main.js里面引入vue-meta-info

import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)
这样在组件页面中就可以使用了 假设你要给contact.vue添加title,meta标签 contact.vue
<template>
...
</template>

<script>
export default {
  metaInfo: {
    title: '我是contact头', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是contact关键字'
    },
    {
      name: 'description',
      content: '我是contact描述'
    }],
    link: [{ // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}
</script> 

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