【开发小技巧】01—实现微前端,你需要了解的 Vue Genesis 渲染器__Vue.js
发布于 4 年前 作者 banyungong 1760 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
来源 | https://www.cnblogs.com/coderhf/archive/2020/06/10/13086341.html

我们的需求

核心的就是渲染器,它提供了最基础渲染能力,有了它,你可以实现微前端、微服务、远程组件、首屏渲染,甚至可以和 react、Ejs 等配合使用。

它可以和怎样的你协作?

  • 如果你是传统的后端渲染的,需要做seo,但是你希望在部分布局,部分页面引入 vue,那么 renderer.renderjson() 足以,将渲染结果传递给后端渲染的模板引擎中即可。

  • 如果你是中后台系统,业务系统全部集中在一个项目,你希望可以按照业务进行服务的拆分,那么 `` 足以

  • 如果你是 CSR 渲染的项目,那么 renderer.renderhtml({ mode: ‘csr-html’ }) 足以

  • 如果你是 SSR 渲染的项目,那么 renderer.renderhtml({ mode: ‘ssr-html’ }) 足以

如果你想做微前端、微服务、那么渲染器 天生就具备了这样的能力,你可以把它当成一个工具函数使用,你可以通过 HTTP 、 RPC 等等各种协议访问到你的服务,然后使用它进行渲染。

创建一个渲染器

开发环境

如果你是项目是第一次创建,程序将会自动在项目根目录创建 vue 基本的模板。

因为在实际的开发环境中,我们还需要静态资源的文件和热更新,watch 对象还提供了对应的中间件使用,如果你使用 Express 框架,可以直接使用

如果你使用了 Koa,或者其它的框架,就需要在对应框架上包装一层中间件使用。

生产环境

开发完成后,需要发布产环境,我们总是需要将代码提前编译好,这样用户访问的时候,就可以立马快速的渲染,所以第一步我们需要先编译代码。

::: warning 注意 在这里你需要把环境变量 NODE_ENV 设置为 production,否则编译出来的是开发模式下的代码,运行时的性能会非常差。 :::
 NODE_ENV=production ts-node index.ts
执行上面的编译命令后,我们将会得到一个 dist 目录,里面放置了我们编译后的代码。如果你想更改编译输出的地址,或者应用名称,可以点击这里了解更多。

代码构建完成后,我们就可以在生产环境中直接创建一个渲染器了。

生产环境,静态资源都是基于内容哈希生成的文件名,所以这里设置静态目录的时候,设置强缓存即可。

渲染器的使用

至此,不管是开发环境还是生产环境,我们都已经拿到了渲染器,接下来我们可以使用渲染器去做一些事情了。

渲染方法

renderer.render().then((result) => {    
console.log(result.data);
});
在默认的情况下,等同于下面的
renderer.render({ url: '/', mode: 'ssr-html' }).then((result) => {    
console.log(result.data);
});
关于渲染方法的更多选项,点击这里了解 renderer.render 方法是渲染器最底层的方法,下面的功能都是基于它来进行封装的。

渲染中间件

如果你的业务比较简单,可以直接通过我们的中间件进行快速的开发,它只是一个简单的 SSR 中间件。 ::: warning 注意 如果 SSR 渲染失败,该中间件不会帮你降级渲染到 CSR :::
app.use(renderer.renderMiddleware);

渲染 html

const result = await renderer.renderhtml();console.log(result);

渲染 jsON

const result = await renderer.renderjson();console.log(result);

降级渲染

为了更好的用户体验,在SSR渲染失败的时候,我们期望它可以降级渲染到 CSR 模式,我们可以对渲染的方法包装一层,并且打印出错误信息。
甚至可以通过一些监控工具,推送到你的邮箱、短信进行报警。
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);

使用路由

调用渲染函数时,传入要渲染的地址和路由的模式,因为在使用远程组件的时候,我们可能不太希望这个组件使用历史模式渲染,也可能使用 abstract 模式渲染,可以最好将它做成动态的参数来控制。
const result = await render({ url: '/', state: { routerMode: 'history' } });
console.log(result.data);
注意 vue-router 不支持一个页面上创建多个历史模式的路由实例,否则你调用 router.push() 方法时,将会创建多个历史记录,为了解决这个问题,请使用 genesis-app 的路由

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>
本文完~

如果喜欢我,可以搜索公众号【极光训练营】,了解更多干货。

同时还可以加我的vx:jgxiaokeai~加入技术交流群和技术大牛一起讨论前端那点事~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 技术全能渣男 原文链接:https://juejin.im/post/6856968423025410062

回到顶部