最近一直在使用 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 重构,源码在此
如果文章对你有所帮助,那么请您点一下❤ 由于本人水平有限,如有错误,欢迎大家指正。如果你在操作过程中发现一些没有讲到的错误或者问题,欢迎在评论留言,一起探讨,共同学习进步!