为什么这么干
之所以这么干,搞这么复杂的技术栈也是实属无奈。coderbbb在发过程中,主要有如下需求:
- 必须能够SEO。这没啥说的,做成传统的VUE站,开发是快,但是不做服务端渲染,没办法SEO。做服务端渲染吧,又太麻烦,而且效果也很不靠谱的。毕竟国内SEO还是主要得靠百度。
- 有很多交互操作,不需要SEO。比如用户和作者之间的IM在线聊天功能;比如用户登录后的个人后台等。
- 有一些地方,既有交互,又需要SEO。比如coderbbb的导航栏,登录后会在导航栏显示一些简单的交互;比如文章的购买弹窗等等。
出于上面的需求,针对上面三个问题,我就选用了针对的技术来解决:
- 必须SEO,那么整个网站的前端就完全基于thymeleaf了。
- 有交互,不需要SEO的地方,就选用VUE来完成。
- 又有交互,又要SEO。那么就用thymeleaf+Vue的形式,把需要seo的内容,使用vue的slot传入到vue的组件中。比如coderbbb的导航栏,就把导航链接通过slot传入到vue的导航组件中,这时候搜索引擎是能够爬取到链接的。vue的组件主要实现的是逻辑控制、样式控制等。这种操作,可能是全网独一份了~有想了解的,可以登录后右下角聊天窗口找我聊天。
IntelliJ和webstorm协同工作
以上是为什么使用springboot+thymeleaf+vue的原因,当我使用这套技术栈后,就不得不同时使用webstorm和IntelliJ这两套IDE了,那么webstorm和IntelliJ怎么配合工作呢?
我主要是通过几个webpack的插件来实现的:
- 使用
FileManagerPlugin
插件,将webpack打包好的前端文件copy一份到IntelliJ的static、templates文件夹下,作为thymeleaf的模板文件。同时,每次copy前先删除IntelliJ对应目录下的旧文件。 - 发布应用的时候,同样也是使用
FileManagerPlugin
将前端文件打包成zip,然后使用scp2
这个插件,将压缩包上传服务器,配合服务端脚本解压,移动到springboot项目对应文件夹下,重启jar包实现的。
这样做,只能说勉强实现了webstorm和IntelliJ的协同开发,实际使用还是不方便,主要是每次前端修改了代码,单纯靠webpack是可以实时预览的,但是作为thymeleaf模板在IntelliJ预览就得先打包,复制文件过去,再重启IntelliJ了。这部分暂时没有啥好办法,正在琢磨。
Vue和thymeleaf怎么整合开发
首先,大多数情况你需要创建的是一个“多入口”webpack应用,每个入口文件对应一个thymeleaf的模板HTML文件。在这个入口文件里,你引入vue,编写代码。单纯的HTML代码是可以seo的,如果你使用了vue的组件,那么组件内部的代码就无法SEO了。
简单描述:就是你在webpack项目中,创建一个a.js作为入口,a.html作为入口对应的HTML,打包后,将a.html放入springboot项目的resources/templates目录下作为thymeleaf模板文件。
thymeleaf怎么给vue赋值呢?可以参考我之前的一篇文章Springboot+thymeleaf结合Vue,通过thymeleaf给vue赋值解决Vue的SEO问题
关于vue+thymeleaf方案在SEO方面的效果
如你所见,coderbbb作为一个新站,目前在百度、bing、google都可以正常收录,并没有因为结合了一部分vue的代码而收录异常。
观察上面的收录情况,可以发现google是收录最多的,这个和我使用vue等技术无关,只是单纯的因为google的爬虫比较勤快,爬到内容后也能快速放出来。
百度之所以只收录6个,也是因为百度自己的算法问题,百度是一如既往的慢~
Bing虽然收录不多不少,算中等。但是曝光率是最高的,目前本站最多的流量来bing~(可能也和Edge浏览器推出,默认搜索引擎是bing,导致bing市场份额上涨有关)