说明: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
Vue 前端开发 Vue 前端开发
支持特性开发模式 Webpack 内存编译,热更新,DLL构建,Cache 和多进程编译支持服务端渲染和前端渲染模式页面入口说明:app/web/page 为页面入口参考:https://github.com/easy-team/ves-admin/blob/master/app/web/page/...
2019-10-19 sky
Next 
构建发布 构建发布
2019-10-19 sky