vue开发网站seo优化方法

痛定思痛。 2022-12-15 03:24 352阅读 0赞

### 前言： ###

> 因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进入页面获取不到文字内容，现在大多数解决方案是不采用ajax渲染数据，而是采用server端渲染，也就是所谓的SSR。  
> 目前基于vue的方案是Nuxt.js，同类型的也有React版的Nuxt.js
> 
> 所以服务端渲染就是尽量在服务器发送到浏览器前，页面上是有数据可让爬虫进行爬取

## 方法一、利用`prerender-spa-plugin`插件将单页面应用打包成多页面 ##

公司里有的项目要进行一个非常重要的功能就是seo的优化，第一次遇到这个东西堵了一段时间，之后还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就救国。

### 问题描述 ###

传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。  
vue搭建的单页面项目有各种优点，易维护、代码简洁、开发体验好等等。但是对于一些传统的互联网公司，vue单页面却有一个很致命的问题就是seo优化的问题。下面是正常打包的vue单页面目录以及index.html的代码。

![在这里插入图片描述][2020101514590714.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。  
谷歌搜索引擎已经可以很好地支持单页面的信息爬取，但是谷歌是国外的国内使用要翻墙所以不作考虑，百度是国内最主要的搜索引擎，百度并不能爬取单页面的数据所以这样的项目如果上线了别人在百度搜索的时候很难找到这个项目。由于我目前公司的大部分项目都是需要做seo优化的所以这个问题就丢到了我这里。

### 解决办法 ###

这里先提一下如果打包的时候报错可能你需要npm安装一下puppeteer（这东西有点大大概300多M）

**第一步通过prerender-spa-plugin来进行vue.config.js的配置**

npm isntall prerender-spa-plugin --save

这个东西是vue用来将单页面应用打包成多页面的第三方插件，安装完成之后在vue.config.js配置配置如下

然后要将vue路由的模式改成history  
最后mian.js入口文件中要加入这段代码。其中render-event要和vue.config.js中的renderAfterDocumentEvent对应

new Vue({ 
      router,
      store,
      render: h => h(App),
      mounted () { 
        document.dispatchEvent(new Event('render-event'))
      }
    }).$mount('#app')

npm run build现在打包之后的目录结构就变成了这样了，以及每个文件夹的index.html代码，  
现在的html代码就有了.vue文件中的template相关代码，但是却多了一个问题就是每个文件夹中的index.html代码都引用了所有的js和css文件这是不利于seo优化的。因此还没有结束。  
![在这里插入图片描述][20201015150228364.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]  
为什么会有这么多js和css呢，因为vue-cli在打包的时候每个.vue文件的script和style标签都会打包成一个对应的js和css，即使你标签里面什么都没有写。

**第二步我是压缩合并体积比较小的js和css文件**

找了vue-cli的文档没有搜索到相关的资料，因此转战webpack  
这个api可以用来设定一个最小的合并文件体积，在上边的webpack配置中的plugins中加入这段代码目测是10000=1kb

const webpack = require('webpack');
     
     
    new webpack.optimize.MinChunkSizePlugin({ 
                        minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上
                    }),

然后`npm run build`  
还是那个目录，但是js和css缩减了很多。  
![在这里插入图片描述][20201015150433727.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

## 方法二、Vue SSR (服务器端渲染) ##

简而言之就是将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

### Vue SSR 相比 SPA（单页应用）好处及坏处 ###

##### 1、好处 #####

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。

##### 2、坏处 #####

1）开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊处理，才能在服务器渲染应用程序中运行。

2）涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。

3）更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集)，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。

具体ssr实现请看后期待续…

[2020101514590714.png_pic_center]: /images/20221123/9a3ed055d01a49ec85feb65c3c09d138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9996e0becbb94b5088b8d05753815541.png
[20201015150228364.png_pic_center]: /images/20221123/7330bfec98534546900476783a4dc681.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/81c8996f0e6446c38df01628e9308a7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5f34b25360e24d259f9c38cedb75ce7f.png
[20201015150433727.png_pic_center]: /images/20221123/d0f33c707036405eb43f0f1c9d241501.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5be3c5df86c547319f1b120578c2a706.png