说明:Node 开发遵循 Eggjs 所有已有项目规范
参考:https://github.com/easy-team/ves-admin

服务端渲染

  • 在 Node 服务端运行 jsbundle,并渲染成完整的 HTML 内容返回给客户端
  • 使用 ctx.render 进行 Vue 服务端渲染, 文件名为 webpack entry 的文件名,对应文件为 app/view 目录
  • ctx.render 渲染时,默认渲染失败会自动降级为客户端渲染模式
import { Controller, Context } from 'ves';
export default class AdminController extends Controller {
  public async home(ctx: Context) {
    await ctx.render('admin/home.js', { url: ctx.url.replace(/\/admin/, '') });
  }
}

客户端渲染

  • 服务端只渲染 HTML 的 HTML,HEAD,BODY 标签结构,具体 BODY 内容由浏览器进行渲染
  • 使用 ctx.renderClient 进行 Vue 客户端渲染, 文件名为 webpack entry 的文件名,注入的页面 JS 文件为 app/public 文件。
import { Controller, Context } from 'ves';
export default class AdminController extends Controller {
  public async home(ctx: Context) {
    await ctx.renderClient('admin/home.js', { url: ctx.url.replace(/\/admin/, '') });
  }
}

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
框架介绍 框架介绍
ves 基于 Egg + Vue 的 TypeScript Node 应用基础框架GitHub:https://github.com/ves-team特性Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制使用 TypeScr...
2019-12-23 sky
Next 
常见问题 常见问题
2019-12-23 sky