安装 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. Selenium:注解@FindBy、@FindBys、@FindAll的用法

    方式有3种:@FindBy.@FindBys.@FindAll.下文对3中类型的区别和使用场景进行介绍 1)@FindBy @FindBy(id= "A") private Web ...

  2. (3) MySQL分区表使用方法

    1. 确认MySQL服务器是否支持分区表 命令: show plugins; 2. MySQL分区表的特点 在逻辑上为一个表,在物理上存储在多个文件中 HASH分区(HASH) HASH分区的特点 根 ...

  3. sklearn linear_model,svm,tree,naive bayes,ensemble

    sklearn linear_model,svm,tree,naive bayes,ensemble by iris dataset .caret, .dropup > .btn > .c ...

  4. NodeJS的url验证库模块url-valid

    这是我10月份做的项目其中的一个部件,主要用于url检验的. 我们知道Javascript做url检验,通常是使用正则表达式来判定,其格式是否正确,例如: /^https?:\/\//.test(ur ...

  5. moment.js返回本周

    项目中需要做个打卡的模块.里面有个模块需要返回当前这个星期从星期日到星期六的日期,如下图: 我是通过 moment.js 的 moment().day() 实现这个效果的,它的说明如下图: 关于这个插 ...

  6. 嵌入式开发之UDP 丢包--- UDP 丢包控制方法

    0. 发送端可以,发送五次左右,再Sleep 1.调用recv方法接收端收到数据后,处理数据花了一些时间,处理完后再次调用recv方法,在这二次调用间隔里,发过来的包可能丢失.对于这种情况可以修改接收 ...

  7. Ubuntu 实践

    Ubuntu 安装中文支持 开始装的是Ubuntu Server,后来需要某些图形工具,所以装了个Gnome,没想到无论如何都显示不了中文,按照网上的方法试了一堆,装了Synaptic,KDE和GNO ...

  8. swoole webSocket服务

    socket.php <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ); //监听WebSocket连接打开事件 (刚打开的时候会给客户端发送 ...

  9. [Object Tracking] Contour Detection through OpenCV

    利用OpenCV检测图像中的长方形画布或纸张并提取图像内容 - 阅读笔记 相对来说,如下链接是此文的高阶方案版本,做对比是极好的. [Object Tracking] Contour Detectio ...

  10. apache2.2服务无法启动 发生服务特定错误:1 的解决办法 (windows服务错误 日志查看方法)

    转 https://blog.csdn.net/liuensong/article/details/6738041 查错过程: 1.查看apache错误日志:目录下的apache/logs/error ...