Nuxt.js tutorial for Vue.js developer - Vue.js 转 Nuxt.js 攻略

截止目前,百度爬虫并不能正确处理js动态修改的页面title,即无法读取通过 document.title = '新的标题' 修改后的标题,比如,之前网页title是 沙沙野,点击图片进入详情页后,用 document.title = '西湖风景图-沙沙野' 修改标题,那么虽然页面的title改为了 西湖风景图-沙沙野 但是源码里的title依旧是 沙沙野,于是乎google爬虫能读到 西湖风景图-沙沙野 但是百度不行,百度读取到的依旧是 沙沙野,使用 nuxt js便可以很好的解决此类问题。

正如上面所说,百度爬虫无法正确处理动态修改的title,那么我们需要做服务端渲染啦,以下是我能想到的两个解决方案:

使用 prerender.js

这部分你可参考:https://github.com/prerender/prerender ,主要是本地启动一个渲染服务,然后安装chrome,将爬虫的请求代理到该服务,这个服务就可以通过调用chrome完成渲染,并把渲染结果返回。这里你需要解决nginx根据ua代理到不同的upstream,另外需要解决用root身份运行chrome

使用 nuxt js

使用 nuxt js 的优势在于原生支持服务端渲染,支持中间件,seo优化(可处理title、description等)相比 vue js 项目,nuxt js 项目结构更加规范,此外也没别的,相比 prerender js,有一定的学习成本,而 prerender js 虽然更简单,但是对于搜索引擎未必更好,毕竟它只对特定的爬虫才渲染,这意味着百度爬虫请求某个页面的时候,需要先通过 prerender js 进行渲染,而不是直接从内存里拿,渲染需要时间,最终的结果是百度爬虫抓取的时间增多,最后可能觉得这个网站用户体验不好,而降低权重。虽然 prerender js 支持缓存,但是我们却不知道爬虫啥时候来访以及要爬取那个页面。而 nuxt js 也可以设置缓存,但 nuxt js 是针对所有请求服务端渲染,对于一个较大型网站,这意味着爬虫来爬取的新页面可能早就在缓存里。如果加入百度的主动推送,两者都可以做到新页面在缓存里,性能上相差可能并不大。另外一点,使用 prerender js 需要运维人员的协助,需要比较熟练Linux和nginx,而 nuxt js 不存在这方面的限制。

nuxt js 入门

1、安装 vue-cli  npm install -g vue-cli

2、初始化一个项目  vue init nuxt-community/starter-template learn-nuxt

这里 learn-nuxt 是项目名称

3、安装依赖:cd learn-nuxt && npm install

4、启动项目:  npm run dev

5、发布项目:  npm run build && npm run start

其中,npm run build 消耗时间很大,可以考虑在本地运行,然后 commit 到git上,接着登录服务器,并pull,最后直接运行 npm install && npm run start 也可以的。当然,npm install 是可选的。

nuxt js 与 vue js 的几点不同之处

1、vue js 通过 route 来管理路由,你需要在 route 里配置路劲以及title等,其中title等于是写死了,而 nuxt js 是根据 pages 下面的文件动态生成,如果 pages 下面的文件以 下划线 开头则为动态路由,这部分可以参考:https://zh.nuxtjs.org/guide/routing

2、vue 引入了插件和中间件概念,插件配置根vue.js实例化之前运行的js,可以是自己写的库或者第三方模块,而中间件则是在某个或者某组页面加载之前运行某个特定的函数,这对于登录授权很有用啊。

3、nuxt js 由于服务端渲染,导致在 created 里无法调用 Window 以及 document,但是你可以在 mounted 里 使用。

总的来说 nuxt js 值得一试,而且很有意思。

本博客若无特殊说明则由 full-stack-trip 原创发布
转载请点名出处:编程生涯 > Nuxt.js tutorial for Vue.js developer - Vue.js 转 Nuxt.js 攻略
本文地址:https://www.kpromise.top/nuxt-js-tutorial-for-vue-js-developer/

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注