页面。vue的seo问题出来后，反响非常强烈，得到了大家的认可。不过我的vue的seo只是理论上的，并没有实际优化过，不知道具体效果如何。正好公司官网上线三个月后，需求量没有增加那么多，所以想停下来，先优化一下官网。首先是选择哪种解决方案进行优化。上一篇文章提到过，vue的seo解决方案有很多种。常见的有：vue-meta-infonuxtphantomjs等。官方解决方案和nuxt。Vue的官方解决方案并不复杂（不要被ssr这个词吓倒）。这是服务端预渲染，需要后端配合。我做的是通过node解析前端的网页，但是正因为如此，所以需要后端配合，这明明是前端的优化，也是为了说服后端（这个估计要面对靠所有前端，毕竟接口让他多过一个字段需要很长时间），所以我果断放弃了这个方案。后来看了一下nuxt官网，发现成本很低。如果你的网站不大，一般两天就可以完成迁移（我们公司官网用了一周）。这对于一个项目的优化来说其实是可以接受的。毕竟，如果这件事做得好，可以为公司创造效益。至于如何使用nuxt框架，这里就不多介绍了，因为官网介绍的很详细，还有地址，说说从老项目迁移到新项目的具体过程：1.如何处理nuxt官网插件部分提到的依赖关系，如果要使用插件，先下载插件，然后在plugins目录下新建一个关于插件的文件，然后导入修改后的插件-在。以element-ui插件为例：首先在plugins目录下创建element.js，并在文件中importelement-uiimportVuefrom'vue'importVTooltipfrom'element-ui'Vue.use(element-ui)接下来引用nuxt.config.js中的模块：exportdefault{plugins:['~/plugins/element.js']}因为plugins数据结构是一个数组，我们可以添加任何我们想要的依赖项。在页面中如何操作数据请求，与之前的nuxt数据请求不同。我们需要将请求的接口放在asyncData函数中。asyncData函数有点像vue3中的组合API。我们需要将所有的接口都集成到asyncData中。写法如下：asyncasyncData({$axios}){constgetList1=await$axios.$get('interface1')constgetList2=await$axios.$get('interface2')return{getList1,getList2}}当然我们也可以在我们的请求中加入很多配置，比如请求头，代理等等，具体可以查看nuxt/axios老项目中的代码是如何迁移的。这是一个建议。复制代码时，一次操作一个模块，避免一次bug太多，无法排查。这里包括一个模块的所有文件，包括api、css、组件、工具类、本地依赖等，这里的顺序建议如下：先复制组件代码，因为组件是核心代码，一般都是其他的文件与组件相关。复制样式文件。复制完成后，需要导入样式，在nuxt.config.js中引用样式文件，才能复制其他文件。这个时候我们可以针对修改我们的组件，不然我们构建的时候会在后台报错，这就需要我们去一一解决seo的其他细节了。这是我们谈论的一个普遍问题。在写vue之前我们已经很熟悉了，比如一个网页只能有一个h1，给图片加标题等等，这里就不一一介绍了。前几天看了一篇前端SEO优化的文章，写的很详细。除了修改代码之外，还可以一一修改。,还能怎么办根据百度的说法，如果一个网站做了认证，那么他被抓取的几率也会增加，所以我特地查了下认证的价格，加个官网标志一年才多3000块钱，对于一个企业来说应该不算很多钱，而且网页多了，增加的收入不只是3000，所以如果我们想做好，可以去申请。通过门户看看我们网站的最终效果。其实效果还是很明显的。我们可以右键查看源代码，几乎所有的网站结构都出来了。这是首页，这是列表页。我们去百度搜集吧。不仅首页和一级菜单页面被收录，社区和房屋详情页也被谷歌收录。所以，综上所述，使用nuxt来完善网站的采集是非常有效的，而且成本也不高，难度也不会太大。在此基础上，我们可以根据自己网站的实际情况进行有针对性的优化。原创不易，如果本文对您有帮助，请点个赞！（手动跪下）想看更多精彩技术文章，请关注【凤凰城下小码农】vx公众号，还有更多海量资源免费。
