共计 1876 个字符，预计需要花费 5 分钟才能阅读完成。
继 vue 的 seo 问题之后，反应很强烈，也失去了大家的认可，然而我对 vue 的 seo 也仅仅停留在实践方面，并没有理论进行过优化，也不晓得具体成果会是什么样的，凑巧公司官网上线三个月后需要减少不是那么多，所以想停下来先对官网进行优化。
首先是抉择哪种计划进行优化，上篇文章提到过，vue 的 seo 解决方案有很多种，常见的如下
- vue 官网服务端渲染
- vue-meta-info
- nuxt
- 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，组件，工具类，部分依赖 等等，这里的程序倡议如下：
- 先拷贝组件代码，因为组件才是最外围的代码，个别其余所有的文件都和组件无关
- 拷贝款式文件，拷贝完后，须要将款式导入在
nuxt.config.js中援用该款式文件 - 拷贝其余文件，这时候咱们就能够有针对性的批改咱们的组件了，或者咱们在构建的时候后盾会有报错，这都须要咱们一个一个的解决
其余对于 seo 的细节
这个就是咱们陈词滥调的问题了，咱们在写 vue 之前就曾经十分相熟了，比方一个网页只能有一个 h1，给图片加title 等等，这里就不一一介绍了，前几天我看了一篇文章前端 seo 优化写的很具体，能够依照里边的一一批改
除了批改代码，咱们还能做些什么
依照百度的说法，如果一个网站被认证过，那么他被抓取的机会也会有所提高，所以我特意去查了一下认证的价格，增加一个官网的标识一年也就三千多块钱，这对一个企业来说应该算不什么钱，况且网页收录的多了，进步的收益可不只 3000，所以咱们要想好好做，能够去申请一下。传送门
看一下咱们网站的最初成果
其实成果还是挺显著的，咱们能够右键查看源代码，简直所有的网站构造都进去了。
这个是首页的
这个是列表页的
咱们开一下百度的收录状况
收录的不仅是首页和一级菜单页面，而且连小区和房源详情页面也有收录
谷歌收录状况
所以，综上所述，应用 nuxt 晋升网站的收录是十分有成果的，而且老本不高，难度也不大，咱们能够在此基础上依据本人网站的理论状况做有针对性的优化。
原创不易，如果这篇文章对你有帮忙，点个赞吧！（手动下跪）
如果想浏览更多精彩的技术文章，欢送关注【凤凰城下的小码农】vx 公号，更有海量资源收费支付。
