继vue的seo问题之后，反应很强烈，也失去了大家的认可，然而我对vue的seo也仅仅停留在实践方面，并没有理论进行过优化，也不晓得具体成果会是什么样的，凑巧公司官网上线三个月后需要减少不是那么多，所以想停下来先对官网进行优化。

首先是抉择哪种计划进行优化，上篇文章提到过，vue的seo解决方案有很多种，常见的如下

  1. vue官网服务端渲染
  2. vue-meta-info
  3. nuxt
  4. phantomjs

等等，首先我只调研了两种，vue官网的解决方案和nuxt。

vue官网的解决方案并不简单（不要被ssr这个词吓到），这个是服务端预渲染，须要后端配合，我做的是通过node解析前端网页的，然而也就是因为这个，须要后端配合，这明明是前端优化，还要压服后端（这预计是所有前端不远面对的，毕竟接口让他多传一个字段就得说半天），所以我果决放弃了这个计划。

起初我看了nuxt官网，发现这个老本是非常低的，如果你的网站不大，通常两天工夫就能迁徙实现（咱们公司的官网花了一周工夫）。这其实对于一个我的项目的优化是能够承受的，毕竟如果这个做好了是能够为公司发明收益的。

对于nuxt框架具体怎么用，这里就不多介绍了，因为官网说的很具体，地址，上面说一下从老我的项目迁徙到新我的项目具体的过程：

1.依赖如何解决

nuxt官网插件局部提到，如果想应用一个插件，首先下载插件，而后在plugins目录下新建对于该插件的文件，而后引入改插件，咱们以element-ui插件为例：

首先在plugins目录下新建element.js,在文件中导入element-ui
import Vue from 'vue'import VTooltip from 'element-ui'Vue.use(element-ui)
接下来在nuxt.config.js中援用改模块：
export default {  plugins: [     '~/plugins/element.js'  ]}

因为plugins的数据结构是数组，所以咱们能够增加任何咱们想增加的依赖。

页面中数据申请如何操作

nuxt数据申请和之前就有些出入了，咱们须要把申请的接口放在asyncData函数中，asyncData函数有点像vue3中的组合式 API,咱们须要把所有的接口集成在asyncData中, 写法如下：

async asyncData({ $axios }) {    const getList1 = await $axios.$get('接口1')    const getList2 = await $axios.$get('接口2')    return { getList1, getList2 }}

当然咱们也能够对咱们的申请增加很多配置，比方申请头，代理等等，具体能够查看nuxt/axios

老我的项目中的代码如何迁徙

这里倡议，在拷贝代码的时候，一个模块一个模块的操作，防止一次性呈现太多bug的时候无奈排查，这里说的蕴含一个模块所有的文件，蕴含api, css，组件，工具类，部分依赖等等，这里的程序倡议如下：

  1. 先拷贝组件代码，因为组件才是最外围的代码，个别其余所有的文件都和组件无关
  2. 拷贝款式文件，拷贝完后，须要将款式导入在nuxt.config.js中援用该款式文件
  3. 拷贝其余文件，这时候咱们就能够有针对性的批改咱们的组件了，或者咱们在构建的时候后盾会有报错，这都须要咱们一个一个的解决

其余对于seo的细节

这个就是咱们陈词滥调的问题了，咱们在写vue之前就曾经十分相熟了，比方一个网页只能有一个h1，给图片加title等等，这里就不一一介绍了，前几天我看了一篇文章前端seo优化写的很具体，能够依照里边的一一批改

除了批改代码，咱们还能做些什么

依照百度的说法，如果一个网站被认证过，那么他被抓取的机会也会有所提高，所以我特意去查了一下认证的价格，增加一个官网的标识一年也就三千多块钱，这对一个企业来说应该算不什么钱，况且网页收录的多了，进步的收益可不只3000，所以咱们要想好好做，能够去申请一下。传送门

看一下咱们网站的最初成果

其实成果还是挺显著的，咱们能够右键查看源代码，简直所有的网站构造都进去了。

这个是首页的

这个是列表页的

咱们开一下百度的收录状况

收录的不仅是首页和一级菜单页面，而且连小区和房源详情页面也有收录

谷歌收录状况

所以，综上所述，应用nuxt晋升网站的收录是十分有成果的，而且老本不高，难度也不大，咱们能够在此基础上依据本人网站的理论状况做有针对性的优化。

原创不易，如果这篇文章对你有帮忙，点个赞吧！（手动下跪）

如果想浏览更多精彩的技术文章，欢送关注【凤凰城下的小码农】vx公号，更有海量资源收费支付。