插件流程

https://easy-team.gitee.io/egg-vue/build

插件介绍

egg-webpack

用于在 egg 项目中启动 Webpack 编译服务,具体流程请见 构建流程 。 该插件只在本地启用。 该插件除了深度结合 easywebpack 体系使用, 也可以单独使用,这个时候需要你自己编写 webpack 配置。

单独使用 egg-webpack 实现 egg vue 一体化方案(不依赖easywebpack)

  • egg-webpack 配置

下面 require 的 webpack.config 为原生 webpack 配置。实现 SSR 时, 需要 target: node 和 target: web 两份 webpack 配置。注意 egg 模板默认路径是 app/view, 所以 target: node 的 编译路径要设置为 app/view 目录,target: web 可以编译到 egg 的默认 app/public 目录下。

// config/config.local.js
 exports.webpack = {
   webpackConfigList: require('./webpack.config')
 };
  • 渲染逻辑实现
'use strict';
const path = require('path');
const egg = require('egg');
const serialize = require('serialize-javascript');
const vueServerRenderer = require('vue-server-renderer');
module.exports = class IndexController extends egg.Controller {
  async index(ctx) {
    const { app } = ctx;
    const entry = 'app.js';
    // egg 模板默认路径是 app/view
    const filepath = path.join(app.config.view.root, entry);
    const manifest = require('../../config/manifest.json');
    const res = manifest.deps[entry];
    const cssLink = res.css.map(src => {
      return `<link href="${src}">`;
    });
    const jsScript = res.js.map(src => {
      return `<script src="${src}"></script>`;
    });
    jsScript.unshift(`<script> window.__INITIAL_STATE__= ${serialize({ cssLink: '', jsScript: '' },
    { isJSON: true })};</script>`);
    const state = { cssLink: cssLink.join('\r\n'), jsScript: jsScript.join('\r\n') };
    if (app.config.env === 'local') {
      const strJSBundle = await app.webpack.fileSystem.readWebpackMemoryFile(filepath);
      ctx.body = await vueServerRenderer.createBundleRenderer(strJSBundle).renderToString({ state });
    } else {
      ctx.body = await vueServerRenderer.createBundleRenderer(filepath).renderToString({ state });
    }
  }
};

egg-webpack-vue

本地开发时,需要从 Webpack 内存里面读取 JSBundle 内容, 该插件会覆盖 egg-view-vue-ssr 的 render 本地文件读取逻辑,从而实现本地开发与线上代码逻辑耦合问题。

egg-view-vue-ssr

egg vue 渲染解决方案插件,统一封装 vue 渲染,缓存,资源注入等功能。 支持服务端渲染,前端渲染, Asset 渲染模式,同时提供 app.vue 扩展接口

内置方案

扩展方案

see: https://github.com/easy-team/egg-view-vue-ssr/blob/master/lib/engine.js

'use strict';
const path = require('path');
const egg = require('egg');
module.exports = class IndexController extends egg.Controller {
  async index(ctx) {
    const { app } = ctx;
    const filepath = path.join(app.config.view.root, 'app.js');
    const html = app.vue.render(filepath, { msg: 'render vue js bundle file to html'});
    ctx.body = html;
  }
};

插件版本

Egg + Vue + Webpack4 SSR 解决方案

  • easywebpack-cli”: ^4.x.x (devDependencies)

  • easywebpack-vue: ^4.x.x (devDependencies)

  • egg-webpack: ^4.x.x (devDependencies)

  • egg-webpack-vue:^2.x.x (devDependencies)

  • egg-view-vue-ssr: ^3.x.x (dependencies)

Egg + Vue + Webpack3 SSR 解决方案

  • easywebpack-cli”: ^3.11.0 (devDependencies)

  • easywebpack-vue: ^3.x.x (devDependencies)

  • egg-webpack: ^3.x.x (devDependencies)

  • egg-webpack-vue: ^2.x.x (devDependencies)

  • webpack-manifest-resource-plugin: ^2.x.x (devDependencies)

  • egg-view-vue-ssr: ^3.x.x (dependencies)


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 文件构建出两份 JSBundle 文件出来,一份给 Node 渲染使用,一份给浏览器渲染使用,但 Node 和浏览器文件初始化代码是不一样的,这就需要我们针对入口代码进行分别实现。这里提供三种实现方案,请根据项目需要选择合适的方案。方案一: 完全自定义入口代...
2019-12-23 sky
Next 
渲染模式 渲染模式
Egg + Vue 渲染模式目前 egg-view-vue-ssr 支持 服务端渲染模式 和 前端渲染模式 两种渲染模式Egg + Vue 服务端 Node 渲染模式这里服务端渲染指的是编写的 Vue 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器。MVVM 服务端渲染相比前端渲染,支持SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。 同时 MVVM 数据驱动方式有着更快的开发效率。总体来说,MVVM 框架的服务端渲染技术比较适合有一定交互性,且对SEO...
2019-12-23 sky