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 ：
Home Page
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/'
}]
}
}
注意：这里的 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默认走的端口是： :3000/ ，但是我们需要指向到自己的域名，所以后端需要配置默认端口。
暂无评论内容