const renderer = createBundleRenderer(bundle, {
runInNewContext: false,
template: tpl, // （可选）页面模板
clientManifest: clientManifest // （可选）客户端构建 manifest
});
ctx.logger('createBundleRenderer renderer：', JSON.stringify(renderer));
try {
html = await renderer.renderToString({
...context,
url: context.CTX.url,
});
} catch(err) {
ctx.logger('SSR renderToString 失败： ', JSON.stringify(err));
console.error(err);
}
ctx.body = html;
};
如何对现有项目进行改造？
基本目录改造
使用
Webpack来处理服务器和客户端的应用程序，大部分源码可以使用通用方式编写，可以使用
Webpack支持的所有功能。一个基本项目可能像是这样：
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── frame
│ ├── app.js # 通用 entry(universal entry)
│ ├── entry-client.js # 仅运行于浏览器
│ ├── entry-server.js # 仅运行于服务器
│ └── index.vue # 项目入口组件
├── pages
├── routers
└── store
app.js是我们应用程序的「通用
entry」。在纯客户端应用程序中，我们将在此文件中创建根
Vue实例，并直接挂载到
DOM。但是，对于服务器端渲染(
SSR)，责任转移到纯客户端
entry文件。
app.js简单地使用
export导出一个
createApp函数：
import Router from '~ut/router';
import { sync } from 'vuex-router-sync';
import Vue from 'vue';
import { createStore } from './../store';import Frame from './index.vue';
import myRouter from './../routers/myRouter';
function createVueInstance(routes, ctx) {
const router = Router({
base: '/base',
mode: 'history',
routes: [routes],
});
const store = createStore({ ctx });
// 把路由注入到vuex中
sync(store, router);
const app = new Vue({
router,
render: function(h) {
return h(Frame);
},
store,
});
return { app, router, store };
}
module.exports = function createApp(ctx) {
return createVueInstance(myRouter, ctx);
