Vue SEO 优化：搜索引擎优化 让搜索引擎更好的 定位到相应数据 vue 项目本身不具备SEO基本条件 解决方案一：预渲染 解决方案二：服务端渲染 Nuxt(终极解决方案)
SEO 优化：搜索引擎优化
让搜索引擎更好的 定位到相应数据
SEO 基本条件： 1. 多页面—>蜘蛛抓取（爬虫） 2.页面要有蜘蛛抓取的内容 3.页面要有 title，描述，关键词
vue 项目本身不具备这些条件
1.Vue 项目本身是单页面应用 SPA（single page web application）。不具备多页面的条件
2.Vue 打包后的项目只有一个 index.html 页面，且里面不包含实际内容，实际页面内容通过.js 文件导入。不具备页面有蜘蛛抓取内容的条件 3.页面没有 title,keywords,描述
为了能更好的被搜索引擎搜索到，需要进行 SEO 优化
解决方案一：预渲染
- 安装预渲染插件 prerander-spa-plugin
npm i prerander-spa-plugin - vue.config.js 配置预渲染
configureWebpack:{ plugins:[ new PreranderSPAPlugin({ staticDir:path.join(__dirname,'dist') routes:[ // 需要打包几个页面就配置几个路由 '/', '/about', '/home', ] }) ] } - 在要打包的页面中配置 metaInfo
export default{ metaInfo:{ title:'guoyanchao',// 设置页面title meta:[{ name:'关键字1，关键字2'， content:'描述......' }] } } 缺点： 1. 如果有很多详情页面需要 SEO,则需要为很多页面配置预渲染路由和 metaInfo。此时不适合使用预渲染进行 SEO 优化 2. 动态改变 title,描述，关键词 是无效的，只能在页面中写死
适合的场景：
对项目中的某几个页面进行 SEO 优化，可以使用预渲染
解决方案二：服务端渲染 Nuxt(终极解决方案)
使用场景： 1.有很多页面需要 SEO 优化 2.需要动态改变 title,描述，关键词
Nuxt.js 服务端渲染特点：
1.不需要路由，新增页面只需要在pages下新建.vue文件就可以在页面访问 2.组件不需要引入就可以使用，新增组件只需要在components下新建.vue文件就可以在页面中使用组件了 3.每个页面文件中配置title，关键字，描述。并且提前拿到请求的数据再渲染页面 Nuxt.js 项目上线流程
- npm run build 会生成.nuxt 文件
- 将项目目录中的
static
.nuxt
package.json
nuxt.config.js
这四个文件放到服务器上 - 服务器安装 node
- 再服务器上 npm install 安装依赖包
- 再服务器上 npm run start 启动项目
- nginx 代理域名
总结：vue 适合做后台管理系统，H5 页面
vue 不适合做 PC 前台（因为大部分 PC 前台都需要做 SEO，而 vue 在 SEO 方面有先天缺陷）
原文链接：https://www.cnblogs.com/guoyanchao/p/16072899.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/20773
