❶ [prerender-spa-plugin]--微型Vue项目的SEO利器
使用prerender-spa-plugin之前,我们构建的网站是一个纯正的Vue CLI项目,采用webpack打包,并使用vue-router进行路由管理。由于目标浏览器不包括老版本IE和移动端浏览器,我们选择了hash模式的路由配置。在页面开发上,我们倾向于将单个页面分离为多个组件,以提高开发效率和后期维护性。
经过开发和上线,我们的网站运行正常,但老大提出了一些关于SEO和用户体验的建议,希望我们能够改用静态页。这让我们陷入了思考,最终决定尝试prerender-spa-plugin这个插件来优化我们的SPA。
prerender-spa-plugin是一个允许webpack预渲染单页应用(SPA)的插件,帮助生成静态页面,以提升SEO表现和用户体验。我们首先将路由模式从hash模式调整为history模式,以便顺利进行预渲染。接着,通过修改vue.config.js文件,使用webpack-merge插件配置了预渲染功能,将相关的页面预先加载和渲染成静态页面,并以独立文件夹的形式保存。
在没有使用prerender之前,网站的文件结构如下:只有一个index.html作为入口文件,动态渲染各个页面。而采用prerender之后,我们的文件结构发生了变化,多了一个关于文件夹,里面包含了一个index.html文件,对应'/about'页面的静态页,使得通过URL访问时可以直接访问到静态页面,而不需要让浏览器进行动态渲染。这样搜索引擎可以爬取到页面的所有内容,而不是单页应用的启动页。
在完成prerender的配置后,我们在根目录的index.html文件中也实现了静态化处理,完成了官网页面的静态化改造。使用prerender-spa-plugin的核心人员也是Vue的核心成员,因此在Vue项目中使用起来非常顺畅。但对于大型项目,可能还需要考虑更全面的解决方案,如服务器端渲染(SSR)。
在完成项目重构后,我们遇到了一个“蝴蝶效应”问题。一些公司介绍被网络收录的链接是旧的静态页链接,导致访问后页面不存在。为了解决这个问题,我们使用了nginx的重定向功能,将旧链接永久重定向至目标URL,避免了创建额外的“跳板”页面,从而提高了SEO表现。
总的来说,通过使用prerender-spa-plugin,我们可以便捷地优化SPA的SEO性能和用户体验,无需进行伤筋动骨的重构。这种方案适用于对SEO需求不强的项目,但在实际应用中,可能还需要考虑其他因素,如项目规模、团队资源和长期维护等问题。在未来,我们计划探索更多的解决方案,如gitlab的自动部署,以应对可能遇到的挑战和优化流程。