总结之vue各方面优化

一、SEO优化

1、什么是 SEO

搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度。

2、搜索引擎的原理

• 从 meta 标签中读取 keywords、description 的内容
• 从HTML标签爬取和分析内容（h1-h6、strong、em等标签）
• 读取a标签里的链接，通过a标签的链接再跳转到别的网站（深度优先：先跳转回头再爬取；广度优先：先爬取然后再依次跳转）

3、SEO需要什么？

• 多页面
• 需要动态改变网页的 title、描述、关键字
• 网站内容
  • 注意： 这里网站内容从哪里来是一个关键点，如果页面的数据是通过请求来的，在页面加载的时候是先有DOM结构，然后才有数据，也就是说此时的网站内容，是无法被蜘蛛抓取的，所以会导致无法被百度收录。

4、SEO 为什么对于单页面应用不友好

• vue是通过js控制路由，然后渲染出对应页面，因此所有隐藏在js中的跳转或者数据都获取不到，蜘蛛抓取中不会执行js，导致搜索引擎只能收录 index.html，而无法搜到其相关的子页面的内容。
• 浏览器加载页面时，首先会对页面进行渲染（dom生成、css构建、javascript解析、布局、绘制），当解析到js的时候，才会去触发vue的渲染，将元素挂载到id为app的div上，这时候我们才能看到页面的内容。因此被搜索引擎收录的index页面，可能也毫无价值，因为没有任何数据。

5、vue解觉SEO方案

预渲染 prerender-spa-plugin

存在问题

• 动态路由解决不了 【比如详情页】
• 无法动态改变title、描述、关键字。

使用

安装插件

cnpm install --save prerender-spa-plugin   //解决打包多个页面
cnpm install --save vue-meta-info          //设置title、描述、关键字，解决SEO的问题

配置 vue.config.js：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [  // 需要预渲染的路由地址(需要打包成几个页面就配置几个路由)
          '/',
          '/about',
          '/contact',
        ],
      }),
    ],
  },
};

在组件中使用 vue-meta-info ：

<template>
  <h2>Home Page</h2>
</template>


<script>
  export default {
    metaInfo: {
      title: 'aaaaaaa商城', // set a title
      meta: [{                 // set meta
        name: '关键字,web前端',
        content: '描述。。。。。。。。。'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script> 

//注意：这里的 metaInfo 不能使用组件中的data数据(由api接口请求回来的动态数据)
//必须手写，前端自测时需要把路由模式设置为 hash。