Vapper

简介

Vapper 是一个基于 Vue 的服务端渲染(SSR)框架，它的核心目标是：简
单、灵活、强大。

简单：尽最大的努力让开发 SSR 应用与开发 SPA 应用保持一致的体验，降>低学习成本和不同项目间切换的成本。最典型的例子是 Vapper 提供的数据>预取方案。

灵活：灵活体现在很多方面，例如 Vapper 只负责必要的 webpack 配置，这使得它可以配合 Vue-CLI、Poi 等优秀的工具一起使用；同时 Vapper 允许你在路由级别上控制是否开启 SSR、SPA 或预渲染的能力，这意味着同一个项目中不同的路由可能采用不同的处理方式。

强大：Vapper 的核心非常简单，但它的插件架构，让你拥有“渐进式”的增强能力，通过不同的插件对 Vapper 进行扩展，几乎能做到任何你期望的事情。实际上，Vapper 的许多核心功能也是以插件的方式实现的。

创建

Vue 创建新项目

如果你还不会使用 vue-cli4 创建项目请参考这篇文章

vue create my-vapper-app

使用

1.安装 Vapper

插件安装（可选）

@vapper/configer-vue-cli
这是 Vapper 默认的 Configer，它会读取当前项目下安装的 @vue/cli-service 并使用它解析出相应的 Webpack 配置。因此 Vapper 可以与 Vue CLI 一同使用，这么做的好处是双向的：Vapper 拥有了全部 Vue CLI 的能力，同时 Vapper 为 Vue CLI 提供了服务端渲染的能力。

@vapper/configer-poi
Poi 也是一个优秀的 Webpack 管理工具，如果你的项目使用 Poi，将很容易接入 Vapper

@vapper/plugin-prerender - 预渲染 html
插件是框架级插件，提供了预渲染能力，指定需要预渲染的路由，该插件会把匹配的路由渲染为相应的 html 文件，当请求到来时，如果匹配指定的路由，则将已经预渲染完成的 html 文件作为静态资源发送给客户端。

@vapper/plugin-cookie - 服务器、客户端 cookie 共用
扩展了 Vapper 应用的运行时，在 Context 对象上添加了 $cookie 属性，用于同构操作

@vapper/plugin-platform
该插件会在 Context 对象和组件实例上注入 browser对象，该对象包含了用户代理的信息browsers选项是一个数组，因此可以定义多条规则。如上高亮代码所示，每条自定义规则都是一个包含test属性和describe属性对象，其中test属性是一个数组，指定一组匹配规则，这组规则将用于UA字符串，一旦规则匹配，将会执行describe函数，实际上describe函数的返回值可以通过this.browser 对象，该对象包含了用户代理的信息browsers选项是一个数组，因此可以定义多条规则。如上高亮代码所示，每条自定义规则都是一个包含 test 属性和 describe 属性对象，其中 test 属性是一个数组，指定一组匹配规则，这组规则将用于 UA 字符串，一旦规则匹配，将会执行 describe 函数，实际上 describe 函数的返回值可以通过 this.browser对象，该对象包含了用户代理的信息browsers选项是一个数组，因此可以定义多条规则。如上高亮代码所示，每条自定义规则都是一个包含test属性和describe属性对象，其中test属性是一个数组，指定一组匹配规则，这组规则将用于UA字符串，一旦规则匹配，将会执行describe函数，实际上describe函数的返回值可以通过this.browser 访问在组件中使用 this.$browser.isChrome() // true or false

npm install @vapper/core
npm install vue-template-compiler
npm install @vapper/configer-vue-cli -D
npm install @vapper/configer-poi -D
//可选插件
npm install @vapper/plugin-prerender
npm install @vapper/plugin-cookie
npm install @vapper/plugin-platform

2. 配置 Vapper

修改 package.json
“scripts”: {
“dev”: “vapper dev”,
“build”: “vapper build”,
“start”: “vapper start”
}

创建 vapper.config.js
Vapper 会寻找项目根目录中的 vapper.config.js 文件，并加载该文件导出的对象作为配置选项

const fs = require('fs');
const path = require('path');
/*导入自定义插件
* 插件可以是一个函数：*/
// const myVapperPlugin = require(path.resolve(__dirname, './src/plugins/myVapperPlugin.js'));
module.exports = {/*入口文件 默认 main.js*/// entry:require(path.resolve(__dirname,'./src/vapper.main.js')),mode: 'development',/*自定义html 模板*/// template: fs.readFileSync(path.resolve(__dirname, './src/templates/default.html'), 'utf-8'),/*指定端口号*/port: 4000,host: '127.0.0.1',// 自定义 logger/*设置日志级别*//*logLevel === 0 ----> silentlogLevel === 1 ----> errorlogLevel === 2 ----> error/warnlogLevel === 3 ----> error/warn/debuglogLevel === 4 ----> error/warn/debug/tiplogLevel === 5 ----> error/warn/debug/tip/info*/logLevel: 5,logger(...args) {console.log(...args)},plugins: [// [myVapperPlugin],['@vapper/plugin-prerender',{routes: ['/foo']}, "scripts", {"generate": "vapper generate"}],['@vapper/plugin-cookie'],['@vapper/plugin-platform',{browsers: [// 自定义 UA 检测规则{test: [/chrome/],describe(ua) {const browser = {name: 'SupperChrome'}return browser}},]}]],
// 允许压缩服务端渲染的 html 内容htmlMinifier: true,// 当错误发生时是否回退 SPA 模式，默认为 true，即回退 SPA 模式fallBackSpa:true,// 指定 Server Bundle 的文件名   serverBundleFileName:// 默认值：'vue-ssr-client-manifest.json'//clientManifestFileName//    默认值：'vue-ssr-client-manifest.json'// 指定 Client Manifest 的文件名//设置页面级缓存  只有“用户无关的动态资源”适合应用 共用资源 pageCache:{cacheable: req => req.url === '/about',getCacheKey:req => req.url + new Date()},}

修改 main.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'Vue.config.productionTip = falseVue.use(VueRouter)// Export factory function
export default function createApp () {// 1. Create a router instanceconst router = new VueRouter({mode: 'history',routes: [{path: '/',component: () => import('./components/HelloWorld.vue'),meta: {ssr: true}}]})// 2. Create the root component optionconst app = {router,// This is necessary, it is for vue-metahead: {},render: h => h(App)}// 3. returnreturn app
}

删除 router 文件及其子文件夹

运行

访问 localhost:4000

Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程相关推荐

vue_SSR框架：搭好的Vue服务器渲染框架，用vue做网站开发、做seo的首选。
前端江太公搭好的Vue服务器渲染框架,用vue做网站开发.做seo的首选最成熟的Vue ssr框架,一个命令就能启动和部署.零侵入开发,跟开发vue纯客户端一模一样. 体验优秀成熟的ssr框架使 ...
【Nuxt3 ssr 服务器渲染】
Nuxt3 ssr 服务器渲染前言大家肯定遇到这样的面试题vue怎样seo?vue怎样提高首页速度?那么答案之一就是ssr服务器渲染. vue的ssr技术最好的选择就是nuxt了!因为迁移起来非常 ...
浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
Windows 服务器用IIS搭建网站详细教程
Windows 服务器用IIS搭建网站详细教程 Windows 服务器用IIS搭建网站详细小白级教程: 通常开通服务器后,需要进行网站搭建,下面是windows2003及2008系统搭建网站的操作方法 ...
抖音排名seo优化账号矩阵技术工具源码搭建
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 Python有很多简单的工具库可用,其中+18137784554+有一个非常实用的工具库: 一.SimpleHTTPServ ...
修改vue项目到服务器端渲染,现有vue-cli3搭建的vue项目改ssr服务器渲染
项目简介 vue+node+koa2 安装ssr依赖 npm install vue-server-renderer webpack-node-externals cross-env --save-d ...
vue ssr服务器渲染笔记
服务器端server 和客户端client 服务端渲染主要使用vue-server-renderer插件 https://www.cnblogs.com/aliwa/p/8505284.html 通 ...
apache上代理转发nuxt ssr服务器渲染配置
1.找到apache目录中 /config/httpd.conf中开启 LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_h ...
阿里云服务器ECS配置选择（新手教程）
阿里云服务器用户常用的三种机型: 独享虚拟主机.轻量应用服务器和云服务器ECS, 独享虚拟主机最为简单,但相对来说它的限制也很多,如果只是建站的话,可以选择这款. 轻量应用服务器支持一站式的域名.网站 ...

Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程

Vapper

简介

创建

使用

1.安装 Vapper

插件安装（可选）

2. 配置 Vapper

运行

Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程相关推荐

最新文章

热门文章

Vue SEO 优化 使用 Vapper SSR 服务器渲染框架 搭建项目 新手教程

Vapper

简介

创建

使用

1.安装 Vapper

插件安装 （可选）

2. 配置 Vapper

运行

Vue SEO 优化 使用 Vapper SSR 服务器渲染框架 搭建项目 新手教程相关推荐

最新文章

热门文章

Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程

插件安装（可选）

Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程相关推荐