Vue实现seo优化+动态设置title

vue默认是单页面（spa），npm run build打包后，只会生成一个index.html文件。默认是先有dom结构（dom里面是没有数据内容的），再加载数据；所以搜索引擎抓取dom结构，而里面没有数据内容，就无法抓取内容、关键词等就会直接返回，所以seo不友好。

缺点：没有动态路由，比如商品详情、文章详情页，一般是动态设置后面的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({    staticDir: path.join(__dirname, 'dist'),  routes: ['/', '/about', '/some/deep/nested/route'],  }) ] } } 

解决：

动态设置title
vue-meta-info官方介绍

vue-meta-info 是一个基于vue 2.0的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此 插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

<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  }) } } </script> 

存在问题：打开网页，title会先走data里面的数据，等接口数据获取到后赋值给data，需要一定时间，可能是零点几秒（title会闪烁）

服务端渲染：nuxt.js
优势：可以完美解决seo各种问题（解决了预渲染不支持动态路由，title闪烁）
缺点：服务器压力大

服务端渲染：压力给到服务器了（数据接口渲染完，组织成html片段，才渲染到客户端页面端口，这样客户端压力就小了。所以需要比较好的服务器支持，比如淘宝、京东这样的网站，如果使用vue做，就会使用服务端渲染）
预渲染：压力给到客户端了（获取到服务端的接口数据后，在客户端进行数据的处理，组织成html片段，渲染到页面上）

如何选择？

开发中，可能vue项目做完了，项目老大说需要做seo，可以使用上面2种方式去重构（注意项目是否使用了动态路由）

原文链接：https://blog.csdn.net/karl982964/article/details/124112016?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836734416800180693792%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836734416800180693792&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-7-124112016-null-null.nonecase&utm_term=%E7%BD%91%E7%AB%99%E3%80%81seo