原文地址

http://www.terwergreen.com/post/vue-ssr-j2v8-1.html

初步实现方案探索(Node环境)

// 第 1 步:创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

引入vue-server-renderer,他里面有一个createRenderer的方法,这个方法里的renderToString,可以把app渲染成字符串,第一个参数是vue实例,第二个参数是回调(错误参数(err),编译好的字符串(html))。

非node环境实现服务端渲染(例如j2v8)

// entry-server.js
import Vue from "vue";
const renderVueComponentToString = require("vue-server-renderer/basic.js");

console.log("renderVueComponentToString");
console.log(renderVueComponentToString);

// app.js
const vm = new Vue({
    template: `<div>{{ msg }}</div>`,
    data: {
        msg: "hello"
    }
});
console.log("data.msg:" + vm.$data.msg);

console.log("renderVueComponentToString");
console.log(renderVueComponentToString);

global.renderServer = context => {
    console.log("context:" + JSON.stringify(context));
    return new Promise((resolve, reject) => {
        renderVueComponentToString(vm, context, (err, res) => {
            if (err) {
                console.log(err);
                reject(err);
            }
            resolve(res);
            console.log(res);
        });
    });
};
// test-entry-server.js
require("../../src/ssr/entry-server")

const context = {
  url: "/"
};

const promise = global.renderServer(context);
console.log("promise");
console.log(promise);

promise.then(
    value => {
      console.log(value);
    },
    reason => {
      console.log(reason);
    }
);

运行结果

➜  webapp git:(develop) ✗ yarn babel-node ./tests/ssr/test-entry-server.js --presets=@babel/preset-env
yarn run v1.13.0
$ /mnt/c/Users/Terwer/IdeaProjects/jvue-cli/src/main/webapp/node_modules/.bin/babel-node ./tests/ssr/test-entry-server.js --presets=@babel/preset-env
renderVueComponentToString
[Function: renderToString]
data.msg:hello
renderVueComponentToString
[Function: renderToString]
context:{"url":"/"}
<div data-server-rendered="true">hello</div>
promise
Promise { '<div data-server-rendered="true">hello</div>' }
<div data-server-rendered="true">hello</div>
Done in 3.63s.

Github

https://github.com/terwer/jvue

https://github.com/terwer/jvue-cli

Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述的更多相关文章

  1. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目

    前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...

  2. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr

    安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...

  3. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle

    安装 webpack-node-externals yarn add -D webpack-node-externals

  4. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  5. 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  6. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  7. Vue 服务端渲染(SSR)

    什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...

  8. 追求极致的用户体验ssr(基于vue的服务端渲染)

    首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...

  9. vue ssr服务端渲染

    SSR:Server Side Rendering(服务端渲染) 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容 ...

随机推荐

  1. 利用jsPDF有效减轻报表型应用服务器的IO负载

    1.利用jsPDF在客户端浏览器上生成pdf文档 使用这种方法可以有效减轻服务器的压力,但是对于国际化,此库任然存在的问题:该库不支持unicode,生成中文文档会乱码,官方也有描述这个问题,详情请参 ...

  2. Atitit 常见每日流程日程日常工作.docx v4

    Atitit 常见每日流程日程日常工作.docx v4 ----早晨 签到 晨会,每天或者隔天 每日计划( )项目计划,日常计划等. mailbox读取检查 每日趋势 推库 -----下午 签退 每日 ...

  3. 自动化CodeReview - ASP.NET Core依赖注入

    自动化CodeReview系列目录 自动化CodeReview - ASP.NET Core依赖注入 自动化CodeReview - ASP.NET Core请求参数验证 我个人比较懒,能自动做的事绝 ...

  4. 物联网架构成长之路(14)-SpringBoot整合thymeleaf

    使用thymeleaf作为模版进行测试 在pom.xml 增加依赖 <dependency> <groupId>org.springframework.boot</gro ...

  5. TypeScript学习笔记(九):装饰器(Decorators)

    装饰器简介 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式. 需要注意的是:装饰器是一项实验性特性,在未来的版本中可能会发生改变. 若要启用实验性的装饰器特 ...

  6. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

  7. linux每日命令(8):mv命令

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 一.命令格式: mv [选项] 源文件或目 ...

  8. Linux下ip地址查询

    [时间:2016-12] [状态:Open] [关键词:linux,ip地址,ifconfig,ip addr] 0 引用 说起来比较搞笑,我在windows下知道可以使用ipconfig命令查询本机 ...

  9. Android开发(十七)——关闭中间activity

    参考: http://java--hhf.iteye.com/blog/1826880

  10. 【iCore1S 双核心板_FPGA】例程七:基础逻辑门实验——逻辑门使用

    实验现象: 打开tool-->Netlist viewer-->RTL viewer可观察各个逻辑连接 核心代码: //-----------------Module_logic_gate ...