1.基于Nuxt进行SSR 对博客前端进行改造
我的博客前端是使用 花裤衩的vue-element-admin 作为模板进行开发的 这是一个基于Vue CLI的SPA(单页面应用) 在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM
所以无法支持SEO
为了能被搜索引擎收录,所以打算进行服务器端渲染(SSR)改造.
SSR
与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于: 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。
查询到有2种讨论比较多的方案
-
VUE自家的服务器端渲染插件,可以生成供Node启动的服务器端JS
-
The Vue.js Framework For Static Generated Applications.
最终选择了 NuxtJS 作为SSR框架
理由当然是刚接触前后端分离,对node和VUE都不熟咯
2.Nuxt JS 介绍 MIT许可
官网介绍:
基于VUE的SSR框架,
我的介绍
作为一个后端程序员,我的感觉是像用上了前端版的Grails框架
Grails Framework
一个基于Groovy和Springboot的Web开箱即用框架
减少了大量VUE-cli的配置,约定大于配置
比如router,VUEX只需要在指定目录放入文件,则能生成路由信息和状态信息
简单贴几个说明:
1.项目目录结构
2.VUE路由根据页面文件pages目录自动生成,支持动态路由,嵌套路由
3.Vuex 状态树 加载store目录生成VUEX配置
4.视图,布局 可以方便的加入页面meta信息用作SEO,
5.扩展了VUE.js,增加了AsyncData生命周期,用作服务器端渲染时异步获取数据(Ajax请求)
6.提供了部署命令,可打包后通过Node直接启动