Vue实现seo优化
- vue实现seo的方法：预渲染+服务端渲染
- 1.预渲染prerender-spa-plugin：在页面dom加载前，先调用接口
- 2.服务端渲染
vue默认是单页面（spa），npm run build打包后，只会生成一个index.html文件。默认是先有dom结构（dom里面是没有数据内容的），再加载数据；所以搜索引擎抓取dom结构，而里面没有数据内容，就无法抓取内容、关键词等就会直接返回，所以seo不友好。
vue实现seo的方法：预渲染+服务端渲染
1.预渲染prerender-spa-plugin：在页面dom加载前，先调用接口
缺点：没有动态路由，比如商品详情、文章详情页，一般是动态设置后面的id。但是预渲染不能使用动态路由（所以，做项目前，需要考虑 动态路由页面是否需要做seo）
预渲染适合做什么项目：动态路由页面不需要seo的
1.安装依赖
cnpm install prerender-spa-plugin -S
2.vue-config.js
const path = require('path')const PrerenderSPAPlugin = require('prerender-spa-plugin')module.exports = { publicPath:'/', lintOnSave:false, configureWebpack:{ plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/about', '/some/deep/nested/route'], //写几个就会打包几个页面 }) ] }}解决：
- 可以打包多页面（不支持动态路由）
- title描述关键词（下面有介绍）
- 可以解决：接口数据是存在dom中（vue默认接口数据，是不存在dom中，所以对seo不友好）
动态设置title
vue-meta-info官方介绍
vue-meta-info 是一个基于vue 2.0的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此 插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了
- vue-meta-info使用
npm install vue-meta-info - 在main.js中全局引入
import MetaInfo from 'vue-meta-info';Vue.use(MetaInfo); - 在组件内使用，可以直接写死title
<template> ...</template> <script> export default { metaInfo: { title: '操作手册', }, }</script> 也可以axios获取到数据，动态赋值title
<template> ...</template> <script> export default { data:{return{dataTitle:'',}}, metaInfo: { title: this.dataTitle, }, created(){axios({url:'xxxx'}).then(res=>{this.dataTitle = res.data.xxx //动态获取title})} }</script> 存在问题：打开网页，title会先走data里面的数据，等接口数据获取到后赋值给data，需要一定时间，可能是零点几秒（title会闪烁）
2.服务端渲染
服务端渲染：nuxt.js
优势：可以完美解决seo各种问题（解决了预渲染不支持动态路由，title闪烁）
缺点：服务器压力大
服务端渲染：压力给到服务器了（数据接口渲染完，组织成html片段，才渲染到客户端页面端口，这样客户端压力就小了。所以需要比较好的服务器支持，比如淘宝、京东这样的网站，如果使用vue做，就会使用服务端渲染）
预渲染：压力给到客户端了（获取到服务端的接口数据后，在客户端进行数据的处理，组织成html片段，渲染到页面上）
如何选择？
- 场景1：使用vue开发，需要seo，是一个商城，有很多商品详情页
选择服务端渲染，因为预渲染不支持动态路由 - 场景2：使用vue开发，需要seo，一个官网，没有文章、商品动态页面
选择预渲染 - 场景3：后台管理页面，需要seo吗？
不需要，直接使用vue-cli做就行了
开发中，可能vue项目做完了，项目老大说需要做seo，可以使用上面2种方式去重构（注意项目是否使用了动态路由）