vue的seo优化

主要方案

①SSR服务器渲染

②静态化

③预渲染prerender-spa-plugin

eg：① 推荐官网了解学习下，SSR建议是在开发之前选用，开发完后在选用SSR有点不太现实。

②手写代码静态代码很难受。

③这里讲下prerender-spa-plugin的方案

一、prerender-spa-plugin
这个插件是模拟浏览器访问站点，将站点的内容以静态文件的方式保存。

安装插件

npm install prerender-spa-plugin --save

在vue.config.js中

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                   //网页包的路径将应用程序输出到prerender
                    staticDir: path.join(__dirname,'dist'),
                    //Routes to render 对应自己router
                    //如果觉得编译后，文件夹太多，可以加一层路径	比如：routes: ['/project', '/project/home', '/project/index', '/project/city', '/project/newsIndex', '/project/member']
                    routes: ['/', '/home','/blog','/aboutMe','/message'],
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        //渲染时显示浏览器窗口。对调试有用。
                        headless: false,
                        //  在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

在main.js中

new Vue({
  router,
  store,
  render: h => h(App),
  //这里与vue.config.js中的事件名相对应
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

把router中的路由改为history模式

export default new Router({
	mode:"history",  // 加这两行代码   报错的话把render-event 改为 render-active（两个地方）
	base: __dirname,  //加这两行代码
    routes: [{
            path: '/',
            name: 'home',
            component: () =>
                import ('@/views/Home'),
            redirect: 'index' //重定向
        },
        {
            path: '/index',
            name: 'index',
            component: () =>
                import ('@/views/index')
        }
    ]
})

好了，到这里已经配置完了，接下来打包就可以了，打包的过程中看到浏览器自动打开许多页面然后关闭，这就是打包的过程。

npm run build

接下来，我们还可以继续优化，虽然现在已经成了多个页面，但是每个页面的title，description，keywords都是一样的

安装插件

npm install vue-meta-info --save

在main.js中

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

在src下新建vue-meta-info.js（注意是与main.js同级）

;var metaInfo = {
  index: {
    title: '这是页面标题内容index',
    meta: [{
        name: 'keywords',
        content: '这是关键字,以,分隔,一般不超过100个字符'
      },
      {
        name: 'description',
        content: '这是描述一般不超过200个字符'
      }
    ]
  },
  home: {
    title: '这是页面标题内容home',
    meta: [{
        name: 'keywords',
        content: '这是关键字,以,分隔,一般不超过100个字符'
      },
      {
        name: 'description',
        content: '这是描述一般不超过200个字符'
      }
    ]
  },
 
};
if (window) window.$VueMetaInfo = metaInfo;
export default metaInfo;

在需要的页面中引入

export default {
  metaInfo:{
    title: 'message',
    meta: [
      {
        name: 'description',
        content: '这是Message页面',
      },
      {
        name: 'keywords',
        content: 'message'
      }
    ]
  },
  data(){
    return {
    }
  },
}

或者动态引入

export default {
  metaInfo() {
    return {
      title: this.title,
      meta: [
        {
          name: "关键词",
          content: "关键字"
        }
      ]
    };
  },
  data() {
    return {
      title: "我是动态更新的标题"
    };
  },
};

还有这个插件是 生成站点地图的，由于我公司项目的webpack版本太低。优化不了，大家有兴趣可以去搜搜。

npm i sitemap-webpack-plugin

还有，记得在index.html中检查并添加

<meta data-vue-meta-info="true" name="keywords" content="关键字">
<meta data-vue-meta-info="true" name="description" content="内容">
<title>标题</title>