Vue SEO方案_基于Vue SEO的四种方案(小结)

基于Vue SEO的四种方案(小结)

更新时刻：2019年7月1日 上午8点25分33秒，作者信息如下：

本篇文章重点阐述了Vue SEO领域的四种策略，详细展示了示例代码，对于大家的学术研究或职业发展提供了有益的借鉴，有兴趣的朋友们不妨跟随小编一同深入探讨和学习。

众所周知，Vue单页面应用在搜索引擎优化方面存在不足，然而，针对这一问题，已有多种研究和应用过的SEO策略。其中，SRR和基于Nuxt的静态化技术便是其中的代表。以下将详细介绍这些近期被广泛探讨和采用的SEO方案。

1.SSR服务器渲染；

2.静态化；

3.预渲染-spa-；

4.使用针对爬虫做处理。

1.SSR服务器渲染

在涉及服务器端渲染技术时，我们必须考虑到对Vue框架的版本有特定要求，同时对于服务器本身也设定了相应的性能标准，确保其能够满足必要的运行环境。

使用SSR权衡之处：

由于开发环境的限制，针对特定浏览器的代码只能在特定的生命周期钩子函数中进行调用；部分外部扩展库在服务器端渲染应用中运行时，可能需要额外的配置；此外，环境和部署标准更为严格，必须具备Node.js运行环境；在高并发访问时，需准备相应的服务器资源，并合理运用缓存机制。

优势：

提升搜索引擎优化效果，得益于搜索引擎的抓取工具能够直接读取已完全渲染的网页内容；同时，内容加载速度也得到显著提升，尤其是在网络速度较慢或设备性能不佳的情况下。

不足：（开发中遇到的坑）

同一代码在两种执行环境下运行，可能导致诸多问题，例如服务端可能缺少必要的对象或资源，解决的办法是增设判断条件，仅当操作在客户端进行时才予以执行。

if(process.browser){
 console.log(window);
}

在引用npm库时，若涉及DOM操作，如使用wowjs，应避免直接使用空格分隔，而应改用其他符号或结构。

if (process.browser) {
引入了名为"WOW"的模块，其来源是使用require函数调用的'wowjs'库。
引入'wowjs'库中的样式文件'animate.css'。
 }

Nuxt框架在页面初始化前会先获取数据，这一操作仅适用于页面组件进行。

// 并发加载多个接口：
进行异步数据处理，函数接收参数app和query，以实现数据请求与处理。
将 [resA, resB, resC] 分别从 await Promise.all([...]) 的结果中提取出来。
  app.$axios.get('/api/a'),
  app.$axios.get('/api/b'),
  app.$axios.get('/api/c'),
  ])
  
  return {
  dataA: resA.data,
  dataB: resB.data,
  dataC: resC.data,
  }
 }

在中获取参数：

1.获取动态路由参数，如：

/list/:id' ==>  '/list/123

接收：

进行异步数据处理，函数asyncData接收参数app和query。
在控制台输出应用上下文中的参数ID，其值为123。
}

2.获取url?获取参数，如：

/list?id=123

接收：

async asyncData ({ app, query }) {
 console.log(query.id) //123
}

若你采用v-if指令，一旦将代码部署至线上环境，很可能会遭遇此类错误。

在应用程序中遇到错误：当尝试在“节点”上对''进行操作时，该节点类型不支持此操作。

at .We

as

依据nuxt平台上的问题报告编号1552的指引，我们需要将v-if指令替换为v-show指令。

4.坑太多，留坑，晚点更。

2.静态化

在 Nuxt.js 进行静态化打包操作期间，动态路由配置将不会被考虑。

-| pages/
---| index.vue
---| users/
-----| _id.vue

为了生成静态网页，必须创建动态路由，同时设定动态路由的参数值，并将这些值设置在相应的数组之中。

// nuxt.config.js
module.exports = {
 generate: {
 routes: [
  '/users/1',
  '/users/2',
  '/users/3'
 ]
 }
}

运行打包，即可看见打包出来的页面。

若路由的动态参数值并非固定，而是处于不断变化之中，那么我们该如何应对这种情况呢？

使用一个返回 对象类型 的 函数；

使用一个回调是 (err, ) 的 函数。

// nuxt.config.js
import axios from 'axios'
export default {
 generate: {
 routes: function () {
执行axios对'https://my-api/users'路径发起的GET请求。
  .then((res) => {
将结果数据映射，对每个用户进行操作，形成新的数组元素。
   return {
   route: '/users/' + user.id,
   payload: user
   }
  })
  })
 }
 }
}

现在，我们能够通过访问 /users/_id.vue 来获取，具体如下所示：

执行异步数据处理函数，参数包括请求参数`params`、错误处理`error`和载荷数据`payload`。
若payload存在，则返回包含user键和payload值的对象。
若非如此，则返回包含用户信息的对象，其中用户数据是通过后端接口调用并获取的，具体是通过传入的ID参数来获取对应用户的详情。
}

若你的动态路由参数众多，比如商品详细信息，数量可能多达几千甚至几万个。这时，需要有一个接口来返回所有商品的ID，随后在打包过程中逐一核对这些ID，将它们打包至本地。一旦有商品被修改或下架，还需重新进行打包操作。在商品数量众多的情况下，这个过程不仅耗时漫长，而且在实际操作中几乎无法实现。

优势：

不足：

3.预渲染-spa-

若你的目的是优化少数营销页面（如 /, /about, /等）的搜索引擎优化，那么你或许需要考虑预渲染技术。这种方式并不需要在运行时通过Web服务器动态编译HTML，而是在构建过程中（即build time）直接生成针对特定路由的静态HTML文件。其优势在于预渲染的设置相对简便，同时还能使你的前端呈现为一个全静态的网站。

执行命令：安装名为“prerender-spa-plugin”的插件，并添加到项目依赖中。

vue cli 3 vue..js 配置：

引入了名为PrerenderSPAPlugin的插件，该插件是通过require函数从'prerender-spa-plugin'模块中导入的。
Renderer 是由 PrerenderSPAPlugin 提供的 PuppeteerRenderer 实现。
const path = require('path');
module.exports = {
 configureWebpack: config => {
若当前环境变量中的NODE_ENV值不是'production'，则执行返回操作。
  return {
   plugins: [
    new PrerenderSPAPlugin({
     // 生成文件的路径，也可以与webpakc打包的一致。
     // 下面这句话非常重要！！！
此目录仅允许存在一级结构，若其层级超过一级，在生成过程中将不会出现错误提示，但在预渲染阶段则会陷入停滞状态。
staticDir: 通过路径连接函数将当前目录名与'dist'拼接，得到的路径，即：path.join(__dirname,'dist')。
针对相应的路由配置文件，例如若a路径带有参数，则应表述为 /a/param1。
路径包括：根目录、产品页面、关于我们页面。
     // 这个很重要，如果没有配置这段，也不会进行预编译
     renderer: new Renderer({
      inject: {
       foo: 'bar'
      },
      headless: false,
在 main.js 文件中，需要执行 document.dispatchEvent(new Event('render-event')) 这一行代码，确保触发的事件名称与预期的一致。
在文档事件之后执行渲染操作，事件类型标识为'render-event'。
     })
    }),
   ],
  };
 }
}

在main.js中添加：

new Vue({
 router,
 render: h => h(App),
 mounted () {
文档触发了一个名为“render-event”的事件。
 }
}).$mount('#app')

注意：中必须设置 mode: “” 。

拆分后可观察到文件存在，打包后形成文件夹 /index.html，比如：将“about”转换为“about/index.html”，其中包含HTML文档。

优势：

不足：

4.使用针对爬虫做处理

这是一种根植于内核的无界面浏览器，换言之，它不具备用户界面。尽管本质上它仍然是一款浏览器，但其中的点击、翻页等交互操作都需要通过编程来具体实现。

虽然“宣布终止开发”，但是已经满足对Vue的SEO处理。

该方案实质上是一种绕道策略，其运作原理在于借助Nginx的配置功能，对访问者的用户代理（UA）进行识别，若确认其为爬虫程序，便将搜索引擎的爬虫请求导向一个node节点，随后在该节点上对完整的HTML内容进行解析，并将结果反馈给爬虫。

具体代码戳这里： vue-seo- 。

要安装全局 ，局部 ，测试：

使用 PhantomJS 运行 spider.js 脚本，对网址 'https://www.baidu.com' 进行爬取操作。

若你在命令行界面中看到了一大堆HTML代码，那么恭喜你，你已经成功掌握了这项技能。

启动程序后，或者在请求的头部添加User-Agent的值为，这两种方法都能达到相同的效果。

部署上线

线上部署需安装node、pm2等软件，同时进行nginx的相关配置设置。

upstream spider_server {
 server localhost:3000;
}
server {
 listen  80;
 server_name example.com;
 
 location / {
设置代理头部为 Host 字段，值由主机名与代理端口组合而成，以冒号分隔，并用分号结束。
设置代理头 X-Real-IP 为客户端的真实IP地址，以分号结束。
设置代理头信息 X-Forwarded-For 为 $proxy_add_x_forwarded_for 的值；
若检测到用户代理字符串匹配以下任一模式：“Baiduspider”、“twitterbot”、“facebookexternalhit”、“rogerbot”、“linkedinbot”、“embedly”、“quora link preview”、“showyoubot”、“outbrain”、“pinterest”、“slackbot”、“vkShare”、“W3C_Validator”、“bingbot”、“Sosospider”、“Sogou Pic Spider”或“Googlebot”、“360Spider”，则执行相应操作。
拒绝转发流量至蜘蛛服务器地址；
  }
 }
}

优势：

不足：

总结

若要打造大型网站，尤其是商城一类的，无需迟疑，应直接采用SSR服务器进行页面渲染。当然，过程中可能会遇到一些挑战，但社区资源丰富，只要英语水平尚可，便能轻松解决各类问题。

如果只是个人博客、公司官网这类，其余三种都可以。

若对已通过SPA技术构建的项目实施搜索引擎优化，并且该优化需兼容node服务器环境，则应选用。

我很少撰写文章，本月我深入研究了Vue的SEO策略，若文中存在不当之处，还请不吝指正，感谢您的理解与支持。

本文内容已全部呈现，期望对各位读者的学习有所裨益，同时我们也期待大家能够继续给予脚本之家更多的支持与厚爱。