说明: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
项目开发 项目开发
2020-04-18 sky
Next 
快速开始 快速开始
项目初始化安装 ves-cli 命令行工具$ npm instal ves-cli -g
2020-04-18 sky