vue SEO的解决方案
什么是 SEO
搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度。
搜索引擎的原理
- 从 meta 标签中读取 keywords、description 的内容
- 从HTML标签爬取和分析内容（h1-h6、strong、em等标签）
- 读取a标签里的链接，通过a标签的链接再跳转到别的网站（深度优先：先跳转回头再爬取；广度优先：先爬取然后再依次跳转）
SEO需要什么？
- 多页面
- 需要动态改变网页的 title、描述、关键字
- 网站内容
注意： 这里网站内容从哪里来是一个关键点，如果页面的数据是通过请求来的，在页面加载的时候是先有DOM结构，然后才有数据，也就是说此时的网站内容，是无法被蜘蛛抓取的，所以会导致无法被百度收录。
SEO 为什么对于单页面应用不友好
- vue是通过js控制路由，然后渲染出对应页面，因此所有隐藏在js中的跳转或者数据都获取不到，蜘蛛抓取中不会执行js，导致搜索引擎只能收录 index.html，而无法搜到其相关的子页面的内容。
- 浏览器加载页面时，首先会对页面进行渲染（dom生成、css构建、javascript解析、布局、绘制），当解析到js的时候，才会去触发vue的渲染，将元素挂载到id为app的div上，这时候我们才能看到页面的内容。因此被搜索引擎收录的index页面，可能也毫无价值，因为没有任何数据。
导致的问题
- 单页面应用无法被SEO
- 无法动态改变网页的TDK（ title、描述、关键字），每个页面的title和meta标签都是一样的，不利于蜘蛛爬取。
vue seo解方案
当然为了seo性能好一般会采用前后端不分离，优点在于非常利于seo，因为不用暴露接口，所以安全系数高。缺点即压力全在服务器端导致服务器负载大。
- 预渲染
prerender-spa-plugin - 服务端渲染 ：
Nuxt.js
方案一、 prerender-spa-plugin
预渲染也称客户端渲染 ，就是在页面加载之前把数据放在页面中，如果是vue文件，我们希望在打包时生成多个页面，这时候我们可以使用 prerender-spa-plugin插件。
存在问题：
- 动态路由解决不了 【比如详情页】
- 无法动态改变title、描述、关键字。
适用场景: 比如公司官网，只适合某几个页面需要做seo。
使用：
一、安装插件
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。
方案二、服务端渲染 ： Nuxt.js
优点：
- 纯静态文件，访问速度更快
- 对比SSR，不涉及到服务器负载方面的问题
- 静态网页不易遭受黑客攻击，安全性更高
存在问题：
- 如果动态路由参数多的话不适用
- Nuxt.js 执行
generate静态化打包时，动态路由会被忽略 - 打开网站都效率慢，压力全在服务器，和前后端不分离差不多了
适用场景：整个网站都做 seo
使用：
前端自测
npm run build npm run generate注意： 仅用于前端自测试，这个时候不能把打包的文件给后端。
项目打包上线
一、运行打包命令
npm run build 二、移动文件
.nuxt、static、nuxt.config.js、package.json把上面的文件给后端，让他放在服务器上 (***）
三、后端安装在服务器安装 Node.js 环境后启动打包的项目
npm run start注意： 因为Nuxt.js默认走的端口是： http://localhost:3000/ ，但是我们需要指向到自己的域名，所以后端需要配置默认端口。