Nuxt 实践

最近一直在使用 Vue 作项目，一直写业务，时间长了没有太多成就感。而后本身就想作一个我的博客玩一玩（绳命在于折腾），了解一下接口开发，项目部署等等。全部东西作下来确实学习到了很多东西。

预览地址

服务端渲染：http://202.5.16.37

非服务端渲染：http://202.5.16.37:8888

管理后台：http://202.5.16.37:8080

接口开发

一开始打算先去学习 go 语言再来开发，可是中途在 Github 上看到一个博客项目 ‘elapse’ 作的还挺好的，就去看一下服务端的源码。发现用 Node + koa + mongodb 写的，看起来也不是很难，因而我就开始照葫芦画瓢，按照本身的需求开发本身的业务。写接口还算比较快，遇到的问题像跨域、token 在 elapse 均可以找到解决办法，在这里我也再也不赘述了。个人服务端的源码在此、接口文档，写的很差，有时间再重构。

前端页面开发

以前全部的项目都是用 Vue 开发，因此这个前端页面对于我来讲算是小菜，没太大的挑战，很快就开发完了，可是用 Vue 开发的后果就是 SEO 很差，鼠标右键显示页面源码看下效果

能够看到 body 标签里面就一个空的 div 以及其余的 script 标签，这就是国内搜索引擎看到的效果，彻底不知道你想要显示什么东西。由于页面上的东西都是这个空白页出来以后再去加载的。好比有个用户上次看了你的一片文章，可是没有收藏，只是记得部份内容，想要从搜索引擎中搜的话，基本是不可能的了。源码在此（公司的项目都是外包，效果出来了就行了，没有人去在意什么 SEO， 嘘，小声点！）。出于学习的目的，这个前端页面我以为仍是要用 Nuxt 重构一下。先看下效果对比一下，页面内容不少，只截取了一部分。

这下搜索引擎就能读取到页面的内容，用户页能够搜索到了。对于没有接触过 Nuxt 的童鞋，我建议仍是先看下官方文档，我遇到的不少问题基本在常见问题中均可以找到答案。部署的问题，文档写的是

服务端渲染应用部署 部署 Nuxt.js 服务端渲染的应用不能直接使用nuxt命令，而应该先进行编译构建，而后再启动 Nuxt 服务，可经过如下两个命令来完成：

nuxt build
nuxt start
复制代码

而后我在服务器上运行的时候就能够访问，一断开 ssh 链接，服务也就挂了。而后我在网上查找关于 Nuxt 部署的问题，看到不少人还觉得和非服务端渲染同样，要打包以后用 ftp 上传到服务器再用 nginx 方向代理。 须要注意的是 Nuxt 服务端渲染也是一个 Node 应用 ，因此仍是和服务端代码同样使用 pm2 开启服务，命令以下 pm2 start npm -- start，服务端渲染源码在此，若是你想在本地开发，能够修改assets/config.js来修改页面配置。

管理后台

由于只是我本身在用的，因此并无用 Nuxt 重构，源码在此

若是文章对你有所帮助，那么请您点一下❤ 因为本人水平有限，若有错误，欢迎你们指正。若是你在操做过程当中发现一些没有讲到的错误或者问题，欢迎在评论留言，一块儿探讨，共同窗习进步！