❶ [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的自动部署，以应对可能遇到的挑战和优化流程。