安装 cross-env

yarn add -D cross-env

安装 html-webpack-plugin

yarn add -D html-webpack-plugin

安装 webpack-merge

yarn add -D webpack-merge

安装 vue-server-renderer

yarn add -D vue-server-renderer

测试

server.js

const renderVueComponentToString = require("vue-server-renderer/basic.js");
const serverBundle = require("./dist/server-bundle");

console.log("server is running ...");

const context = {
  url: "/"
};
const promise = serverBundle.default(context);

promise
  .then((resolve, reject) => {
    console.log("promise resolved");
    const vm = resolve;
    renderVueComponentToString(vm, (err, res) => {
      if (err) {
        console.log(err);
        return;
      }
      console.log(res);
    });
  })
  .catch(rejected => {
    console.log(rejected);
  });

运行结果

➜  webapp git:(j2v8-version) ✗ yarn dev
yarn run v1.13.0
$ node server
server is running ...
cntext=> { url: '/' }
promise resolved
<div data-server-rendered="true"><h1>Hello World! Vue,j2v8!</h1></div>
Done in 0.69s.

Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr的更多相关文章

  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实现服务端渲染1概述

    原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...

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

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

  4. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

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

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

  6. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

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

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

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

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

  9. Vue 服务端渲染(SSR)

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

随机推荐

  1. Easyui 弹出加载中的遮罩的两种方法

    第一种: //弹出加载层function load() {      $("<div class=\"datagrid-mask\"></div> ...

  2. SNF快速开发平台MVC-自由排序组件

    1.    自由排序功能使用 在一些需要排序优先级的数据进行调整处理,如民族数据,在北方实施的时候汉族比较多,希望把汉族放在第一位.在蒙古实施项目时,蒙古族人最多把蒙古族放在第一选择位. 1.1.   ...

  3. 第三部分:Android 应用程序接口指南---第二节:UI---第十章 拖放

    第10章 拖放 使用Android的拖放框架,允许用户通过一个图形化的拖放动作,把数据从当前布局中的一个视图上转移到另一个视图上.这个框架包含了一个拖动事件类,拖动监听器和一些辅助的方法和类. 虽然这 ...

  4. Socket网络编程--小小网盘程序(5)

    各位好呀!这一小节应该就是这个小小网盘程序的最后一小节了,这一节将实现最后的三个功能,即列出用户在服务器中的文件列表,还有删除用户在服务器中的文件,最后的可以共享文件给好友. 列出用户在服务器中的文件 ...

  5. 如何取消Visual Studio Browser Link

    VS2013.2015新建MVC网站并浏览后,页面默认自动启用Browser Link功能 解决方法,只需要在web.config中添加配置节点即可 <appSettings> <a ...

  6. Android开发(二十一)——自动更新

    参考: [1] Android应用自动更新功能的代码实现.http://www.cnblogs.com/coolszy/archive/2012/04/27/2474279.html

  7. Git的使用(一)

    最近在解除git的使用,开始觉得git某些地方还是挺方便的. 1.svn的话管理起来是比较方便,可是断网的话,会用不了 2.git的话,管理一些开源的东西比较方便,并且比较好管理日常写的demo程序, ...

  8. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  9. hive表增量抽取到mysql(关系数据库)的通用程序(三)

    hive表增量抽取到oracle数据库的通用程序(一) hive表增量抽取到oracle数据库的通用程序(二) 这几天又用到了该功能了,所以又改进了一版,增加了全量抽取和批量抽取两个参数.并且可以设置 ...

  10. SpringBoot Docker入门,SpringBoot Docker安装

    SpringBoot Docker入门,SpringBoot Docker安装 ================================ ©Copyright 蕃薯耀 2018年4月8日 ht ...