咱們的需求
它能夠和怎樣的你協做？
若是你是傳統的後端渲染的，須要作seo，可是你但願在部分佈局，部分頁面引入 vue，那麼 renderer.renderjson() 足以，將渲染結果傳遞給後端渲染的模板引擎中便可。javascript
若是你是中後臺系統，業務系統所有集中在一個項目，你但願能夠按照業務進行服務的拆分，那麼 `` 足以css
若是你是 CSR 渲染的項目，那麼 renderer.renderhtml({ mode: 'csr-html' }) 足以html
若是你是 SSR 渲染的項目，那麼 renderer.renderhtml({ mode: 'ssr-html' }) 足以前端
建立一個渲染器
開發環境
import { SSR } from '@fmfe/genesis-core'; import { Watch } from '@fmfe/genesis-compiler';
const start = async () => {const ssr = new SSR();const watch = new Watch(ssr); await watch.start();const renderer = watch.renderer; // 拿到渲染器以後，作點什麼 .... };
start();
. ├── src │ ├── app.vue 入口的頁面 │ ├── entry-client.ts 客戶端入口文件 │ ├── entry-server.ts 服務端入口文件 │ └── shims-vue.d.ts vue文件的TS聲明 │ └── package.json
/** * 靜態資源中間件 */ app.use(watch.devMiddleware); /** * 熱更新的中間件 */ app.use(watch.hotMiddleware);
生產環境
import { SSR } from '@fmfe/genesis-core'; import { Build } from '@fmfe/genesis-compiler';
const start = () => {const ssr = new SSR();const build = new Build(ssr); return build.start(); };
start();
NODE_ENV=production ts-node index.ts
. ├── dist │ ├── ssr-genesis 應用名稱 │ │ ├── client 客戶端資源文件 │ │ | ├── js 腳本 │ │ | ├── css 樣式 │ │ | ├── images 圖片 │ │ | ├── medias 媒體資源 │ │ | └── fonts 字體文件 │ │ ├── server 服務端資源文件 │ │ │ ├── vue-ssr-client-manifest.json 客戶端構建清單 │ │ │ └── vue-ssr-server-bundle.json 服務端應用包 │ └── package.json
import { SSR } from '@fmfe/genesis-core';
const start = async () => {const ssr = new SSR();const renderer = ssr.createRenderer(); // 拿到渲染器以後，作點什麼 .... };
start();
app.use( renderer.staticPublicPath, express.static(renderer.staticDir, { immutable: true, maxAge: '31536000000' }) );
渲染器的使用
渲染方法
renderer.render().then((result) => { console.log(result.data);});
renderer.render({ url: '/', mode: 'ssr-html' }).then((result) => { console.log(result.data);});
渲染中間件
app.use(renderer.renderMiddleware);
渲染 html
const result = await renderer.renderhtml();console.log(result);
渲染 jsON
const result = await renderer.renderjson();console.log(result);
降級渲染
const render = (options: RenderOptions = {}) => { return renderer.render(options).catch((err: Error) => { // 打印渲染失敗的錯誤信息 console.error(err); const mode: RenderMode = options.mode || 'ssr-html'; return renderer.render({ ...options, mode: mode.indexOf('html') ? 'csr-html' : 'csr-json' }); });};const result = await render();console.log(result.data);
使用路由
const result = await render({ url: '/', state: { routerMode: 'history' } });console.log(result.data);
router.ts
npm install vue-router
importvue from 'vue';import Router, { RouterMode } from 'vue-router';
Vue.use(Router);
export const createRouter = (mode: RouterMode = 'history') => { return new Router({ mode: mode, routes: [ // 配置你的路由 ] });};
entry-server.ts
import { RenderContext } from '@fmfe/genesis-core'; import Vue from 'vue'; import App from './app.vue'; import { createRouter } from './router';
export default async (renderContext: RenderContext): Promise<Vue> => { // 讀取傳過來的路由模式 const mode = renderContext.data.state.routerMode; // 建立路由 const router = await createRouter(mode); // 設置渲染的地址 await router.push(renderContext.data.url); // 建立 Vue 實例 return new Vue({ // 傳入路由對象 router, renderContext, render(h) { return h(App); } }); };
entry-client.ts
import { ClientOptions } from '@fmfe/genesis-core'; import Vue from 'vue'; import App from './app.vue'; import { createRouter } from './router';
export default async (clientOptions: ClientOptions): Promise<Vue> => { // 讀取服務端下發的路由模式 const mode = clientOptions.state.routerMode; // 建立路由 const router = await createRouter(mode); // 設置渲染的地址 await router.push(clientOptions.url); // 建立 Vue 實例 return new Vue({ // 傳入路由對象 router, clientOptions, render(h) { return h(App); } }); };
app.vue
<template> <div> <h2>你好世界！</h2> <p v-if="show" @click="close"> {{ installed ? '在客戶端應該安裝成功，點擊我關閉!' : '未安裝' }} </p> <router-view /> </div> </template>
本文分享自微信公衆號 - web前端開發（web_qdkf）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。vue