vue的seo解决方案，用nuxt提升网站的收录

2021-05-2009:15:12WEB前端开发Comments3,405 views字数 1706阅读模式

选择哪种方案进行优化，上篇文章提到过，vue的seo解决方案有很多种，常见的如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

vue官方服务端渲染
vue-meta-info
nuxt
phantomjs

等等，首先我只调研了两种，vue官方的解决方案和nuxt。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

vue官方的解决方案并不复杂（不要被ssr这个词吓到），这个是服务端预渲染，需要后端配合，我做的是通过node解析前端网页的，但是也就是因为这个，需要后端配合，这明明是前端优化，还要说服后端（这估计是所有前端不远面对的，毕竟接口让他多传一个字段就得说半天），所以我果断放弃了这个方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

后来我看了nuxt官网，发现这个成本是非常低的，如果你的网站不大，通常两天时间就能迁移完成（我们公司的官网花了一周时间）。这其实对于一个项目的优化是可以接受的，毕竟如果这个做好了是可以为公司创造收益的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

关于nuxt框架具体怎么用，这里就不多介绍了，因为官网说的很详细，地址，下面说一下从老项目迁移到新项目具体的过程：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

1.依赖如何处理

nuxt官网插件部分提到，如果想使用一个插件，首先下载插件，然后在plugins目录下新建关于该插件的文件，然后引入改插件，我们以element-ui插件为例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

首先在plugins目录下新建element.js,在文件中导入element-ui文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

import Vue from 'vue'
import VTooltip from 'element-ui'
Vue.use(element-ui)
复制代码

接下来在nuxt.config.js中引用改模块：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

export default {
  plugins: [
     '~/plugins/element.js'
  ]
}
复制代码

因为plugins的数据结构是数组，所以我们可以添加任何我们想添加的依赖。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

页面中数据请求如何操作

nuxt数据请求和之前就有些出入了，我们需要把请求的接口放在asyncData函数中，asyncData函数有点像vue3中的组合式 API,我们需要把所有的接口集成在asyncData中, 写法如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

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

当然我们也可以对我们的请求添加很多配置，比如请求头，代理等等，具体可以查看nuxt/axios文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

老项目中的代码如何迁移

这里建议，在拷贝代码的时候，一个模块一个模块的操作，避免一次性出现太多bug的时候无法排查，这里说的包含一个模块所有的文件，包含api, css，组件，工具类，局部依赖等等，这里的顺序建议如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

先拷贝组件代码，因为组件才是最核心的代码，一般其他所有的文件都和组件有关
拷贝样式文件，拷贝完后，需要将样式导入在nuxt.config.js中引用该样式文件
拷贝其他文件，这时候我们就可以有针对性的修改我们的组件了，或者我们在构建的时候后台会有报错，这都需要我们一个一个的解决

其他关于seo的细节

这个就是我们老生常谈的问题了，我们在写vue之前就已经非常熟悉了，比如一个网页只能有一个h1，给图片加title等等，这里就不一一介绍了，前几天我看了一篇文章前端seo优化写的很详细，可以按照里边的一一修改文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html

除了修改代码，我们还能做些什么

按照百度的说法，如果一个网站被认证过，那么他被抓取的机会也会有所提高，所以我特意去查了一下认证的价格，添加一个官网的标识一年也就三千多块钱，这对一个企业来说应该算不什么钱，况且网页收录的多了，提高的收益可不只3000，所以我们要想好好做，可以去申请一下。传送门文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21455.html