cli vue webpack 实战_Vapperjs - 一个基于 Vue 的 SSR 框架

vapper

基于Vue的服务器端渲染框架

Vapper是基于Vue的服务器端render(SSR)框架，其核心目标是简单，灵活和功能强大。

主要特点

• 简约至上

使用Vapper开发SSR应用程序的经验就像开发SPA应用程序一样。无需学习多余的概念。Vapper允许您以非常直观和一致的方式预取数据。

• 灵活而强大

Vapper允许您有选择地启用SSR和对路由级别的控制。Vapper还允许您同时使用SSR，Fallback SAP，预渲染等。

• 插件架构

Vapper的插件体系结构使其非常可扩展。如果您已经编写了Vue-cli3插件，您将熟悉Vapper的插件创作。Vapper通过插件支持cookie，预渲染，Apollo等。

必要的webpack配置

实际上，VueSSR 的原理非常简单，我们需要两种webpack配置：server config和用于client config在何处生成资源，用于生成发送到浏览器并生成资源。server configserver bundleclient configclientManifest

这些webpack配置与应用程序的webpack配置类似SPA，可以SSR稍作调整即可使用，因此，Vapper它不会单独管理所有webpack配置，而仅管理必要的webpack配置，因此Vapper可以与Vue-CLI和Poi。这样做的好处是Vue-CLI或Poi的功能间接成为的能力Vapper。

Vapper提供了两个用于集成Vue-CLI和Poi的软件包：

• @ vapper / configer-vue-cli
• @ vapper / configer-poi

如下图所示：

除了使用Vue-CLI或Poi作为webpack管理工具之外，您还可以使用自己的webpack配置。Vapper的Builder模块仅要求您公开getServerConfig和getClientConfig方法：

class MyOwnConfiger { getServerConfig () { return {...} // Return server configuration } getClientConfig () { return {...} // Return client configuration }}

有关详细信息，请参阅：Write Configer

路由级别控制

Vapper考虑到以下情况，的另一个设计目标是尽可能地灵活：

我们的要求是，当用户访问时/home，我们想要执行服务器端渲染(SSR)；当用户访问时/foo，我们希望将SPA页面发送给用户；当用户访问时/bar，我们希望将预渲染的内容发送给用户。您可能已经注意到，这要求我们具有路由级别的控制并Vapper具有此功能，如以下路由规则所示：

我们可以使用该@vapper/plugin-prerender插件来支持预渲染并指定需要预Vapper渲染的路由，然后html在构建时将这些路由渲染到文件中。当用户请求到达时，Vapper会将其html作为静态资源发送给用户。

错误处理

发生错误时，我们有两种选择：

1. 向用户显示错误页面
2. 退回到SPA模式，而不是显示错误页面

Vapper使您可以灵活控制错误的处理方式。发生错误时，可以向用户显示错误页面。您还可以退回到该SPA模式，以便在发生非致命错误时，用户仍然可以使用我们的应用。

您需要知道的一件事是：当Vapper项目中没有启用路由时SSR，它就是一个SPA应用程序。

数据预取

Vapper 提供了一种更直观，功能更强大的数据预取方法：

插件架构

的插件架构Vapper非常灵活。它借鉴了Vue-CLI的插件架构。您可以扩展CLI命令，添加服务器中间件，并使用挂钩函数来参与的整个生命周期Vapper。

事实上，很多的核心特征Vapper是在用自己的插件机制，如写Fallback SPA，micro-caching等等。此外，Vapper可逐步支持通过插件所需的功能，官方插件如下：

• @vapper/plugin-fs-routes
• @ vapper / plugin-cookie

您可以查看插件开发以了解如何编写插件。

开源地址：

https://github.com/vapperjs/vapper

更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。