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-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的更多相关文章
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目
前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...
- Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述
原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
安装 webpack-node-externals yarn add -D webpack-node-externals
- vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器
vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器
小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- Vue 服务端渲染(SSR)
什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...
随机推荐
- [转]linux(ubuntu)上运行网易popo
popo没有linux版,连web版和android版都没有,这个实在是不方便.搞了很久,终于搞定了ubuntu上运行popo,暂时还没出现什么问题. 首先要安装PlayOnLinux,直接安装win ...
- Spring Boot系列——Spring Boot如何启动
Spring Boot启动过程 上篇<Spring Boot系列--5分钟构建一个应用>介绍了如何快速创建一个Spring Boot项目并运行.虽然步骤少流程简单,为开发者省去了很多重复 ...
- [转]设备唯一标识方法(Unique Identifier):如何在Windows系统上获取设备的唯一标识
原文地址:http://www.vonwei.com/post/UniqueDeviceIDforWindows.html 唯一的标识一个设备是一个基本功能,可以拥有很多应用场景,比如软件授权(如何保 ...
- mongodb复制集Replica Set使用简介
MongoDB高可用 对于MongoDB,可以支持使用单机模式提供服务,但是在实际的生产环境中,单机模式将面临很大的风险,一旦这个数据库服务出现问题,就会导致线上的服务出现错误甚至崩溃.因此,在实际生 ...
- sublime text 3浅色主题
{ // Lighter theme "theme": "Material-Theme-Lighter.sublime-theme", "color_ ...
- Android开发(二十一)——自动更新
参考: [1] Android应用自动更新功能的代码实现.http://www.cnblogs.com/coolszy/archive/2012/04/27/2474279.html
- 【原】在Matplotlib绘图过程中设置X轴的刻度和显示文本
使用Matplotlib进行绘图时,当x轴的数据太多的时候,就需要设置x轴的刻度和显示文本,关键代码如下: 绘图结果如下:
- idea java 非web程序打包
以下打包非常暴力.O(∩_∩)O哈哈~ 方法一: 第一步:选择需要打包的程序 第二步:选择需要打包的文件 第三步:artifacts->jar->from modules with... ...
- DOS、Mac 和 Unix 文件格式+ UltraEdit使用
文件格式 区分DOS.Mac 和 Unix分别对应三种系统 从文件编码的方式来看,文件可分为ASCII码文件和二进制码文件两种 文件模式 区分ASCII模式和Binary模式 通常由系统决定,大多数 ...
- [React] 13 - Redux: react-redux
Ref: Redux 入门教程(三):React-Redux 的用法 组件拆分规范 使用 React-Redux,需要掌握额外的 API,并且要遵守它的组件拆分规范. React-Redux 将所有组 ...