Vapper介绍Vapper是一个基于Vue的服务端渲染（SSR）框架，其核心目标是：简单、灵活、强大的。简单性：尽量让开发SSR应用和SPA应用的体验保持一致，减少不同项目之间的学习成本和切换成本。最典型的例子就是Vapper提供的data>prefetch方案。灵活性：灵活性体现在很多方面。例如，Vapper只负责必要的webpack配置，这使得它适合与Vue-CLI和Poi等优秀工具一起使用。同时，Vapper允许你在路由层面控制是否开启SSR、SPA或预配置。渲染能力，意味着同一个项目中不同的路由可能会使用不同的处理方式。强大：Vapper的核心非常简单，但是它的插件架构让你拥有“渐进式”的增强能力，你可以通过不同的插件来扩展Vapper，几乎可以做任何你想做的事情。事实上，Vapper的很多核心功能也是以插件的形式实现的。CreateVue新建项目如果不知道如何使用vue-cli4创建项目，请参考这篇文章vuecreatemy-vapper-app使用1.安装Vapper插件安装（可选）@vapper/configer-vue-cli这是Vapper默认的Configer，它会读取当前项目下安装的@vue/cli-service，并用它来解析出对应的Webpack配置。因此，Vapper可以与VueCLI一起使用。这样做的好处是两方面的：Vapper拥有VueCLI的所有能力，Vapper为VueCLI提供服务端渲染能力。@vapper/configer-poiPoi也是一个优秀的Webpack管理工具，如果你的项目使用了Poi，那么访问Vapper@vapper/plugin-prerender将很容易——预渲染的html插件是一个框架级别的插件，提供预渲染渲染能力，指定需要预渲染的路由，插件会匹配对应html文件中渲染的路由，当请求到来时，如果匹配到指定路由，则将预渲染的html文件发送到客户端作为静态资源。@vapper/plugin-cookie-服务端和客户端的cookie共享扩展了Vapper应用的运行时间，并在Context对象中增加了一个$cookie属性用于同构操作
@vapper/plugin-platform这个插件会在InjectContext对象和组件实例上的$browser对象，其中包含用户代理的信息。browsers选项是一个数组，因此可以定义多个规则。如上图高亮代码所示，每条自定义规则都是一个对象，包含一个test属性和一个describe属性，其中test属性是一个数组，指定一组匹配规则，用于UA字符串。一旦规则匹配，就会执行describe函数。其实可以通过this.$browser访问describe函数的返回值。在组件中使用this.$browser.isChrome()//trueorfalsesenpminstall@vapper/corenpminstallvue-template-compilernpminstall@vapper/configer-vue-cli-Dnpminstall@vapper/configer-poi-D//可选插件npminstall@vapper/plugin-prerendernpminstall@vapper/plugin-cookiepminstall@vapper/plugin-platform2。配置Vapper修改包.json"scripts":{"dev":"vapperdev","build":"vapperbuild","start":"vapperstart"}创建vapper.config.jsVapper会寻找vapper。在项目.js文件根目录下config，加载该文件导出的对象作为配置选项constfs=require('fs');constpath=require('路径');/*importcustomplugins*pluginscanbeafunction:*///constmyVapperPlugin=require(path.resolve(__dirname,'./src/plugins/myVapperPlugin.js'));module.exports={/*入口文件默认为main.js*///entry:require(path.resolve(__dirname,'./src/vapper.main.js')),mode:'development',/*自定义html模板*///模板：fs.readFileSync(path.resolve(__dirname,'./src/templates/default.html'),'utf-8'),/*指定端口号*/port:4000,host:'127.0.0.1',//自definelogger/*setloglevel*//*logLevel===0---->silentlogLevel===1---->errorlogLevel===2---->error/warnlogLevel===3---->错误/警告/调试日志级别===4---->错误/警告/调试/提示日志级别===5---->错误/警告/调试/提示/信息*/日志级别:5,logger(...args){console.log(...args)},plugins:[//[myVapperPlugin],['@vapper/plugin-prerender',{routes:['/foo']},"scripts",{"generate":"vappergenerate"}],['@vapper/plugin-cookie'],['@vapper/plugin-platform',{浏览器:[//自定义UA检测规则{测试：[/chrome/],describe(ua){constbrowser={name:'SupperChrome'}returnbrowser}},]}]],//允许压缩服务端渲染的html内容htmlMinifier:true,//出错时是否回退到SPA模式，默认为true，即回退到SPA模式fallBackSpa:true,//指定ServerBundle的文件名serverBundleFileName://默认值:'vue-ssr-client-manifest.json'//clientManifestFileName//默认值:'vue-ssr-client-manifest.json'//指定ClientManifest的文件名//设置页面级缓存只有“用户无关的动态资源”才适合应用共享资源pageCache:{cacheable:req=>req.url==='/about',getCacheKey:req=>req.url+newDate()}}修改main.js文件importVuefrom'vue'importVueRouterfrom'vue-router'importAppfrom'./App.vue'Vue.config.productionTip=falseVue.use(VueRouter)//exportfactoryfunctionexportdefaultfunctioncreateApp(){//1.创建路由器实例constrouter=newVueRouter({mode:'history',routes:[{path:'/',component:()=>进口t('./components/HelloWorld.vue'),meta:{ssr:true}}]})//2.创建根组件optionconstapp={router,//这是必须的，它用于vue-metahead:{},render:h=>h(App)}//3.returnreturnapp}删除路由器文件及其子文件夹运行并访问localhost:4000
