• Egg + Vue 工程化解决方案

快速开始

项目初始化

方式一：easywebpack-cli 脚手架初始化项目

1. 安装脚手架 npm install easywebpack-cli -g
2. 初始化 easywebpack init

3. 根据需求选择

   
   初始化的选择
4. 安装依赖 npm install

方式二：Github 仓库代码初始化项目

1. git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
2. 安装依赖 npm install

方式三：vscode 插件初始化项目

插件地址

项目运行

本地运行

npm run dev

发布模式

1. 构建文件落地磁盘 npm run build 或 easy build prod

• 服务端构建的文件放到 app/view 目录
• 前端构建的文件放到 public 目录
• 生成的 manifest.json 放到 config 目录

2. 运行 npm start

项目构建

项目规范

• egg开发规范
• 前端工程目录：app/web目录
• 页面入口目录： app/web/page
• 建议每个页面的目录只保留一个vue文件

项目开发

多页面服务端渲染实现

• 多页面前端页面实现：在app/web/page目录下面创建home目录，home.vue文件，webpack 自动根据 .vue 文件创建entry入口
• 多页面后端渲染实现：通过 egg-view-vue-ssr 插件 render 方法实现
• 多页面走前端渲染实现：通过 egg-view-vue-ssr 插件 renderClient 方法实现

HTML静态页面前端渲染

• 直接由 easywebpack 构建出静态HTML文件，请见 webpack.config.js 配置和 app/web/page/html 代码实现
• 通过 egg-static 静态文件访问HTML文件

单页面服务端渲染同构实现

• 单页面前端实现：在 app/web/page 目录下创建 app 目录，app.vue 文件，app.js 文件
• 单页面后端实现：
  • 在 app/controller 目录下创建 app.js文件
  • 在 app/router.js 文件中添加路由配置 app.get('app(/.+)?', app.controller.app.index)

项目和插件

• egg-vue-webpack-boilerplate：基于 easywebpack-vue 和 egg-view-vue（ssr）插件的工程骨架项目
• easywebpack-vue：webpack vue 构建工程化方案
• easywebpack-cli：webpack 构建工程化脚手架
• egg-view-vue-ssr：egg vue ssr 解决方案
• egg-webpack：本地开发热更新使用
• egg-webpack-vue：本地开发渲染内存读取辅助插件

---

渲染模式

目前 egg-view-vue-ssr支持 服务端渲染模式 和 前端渲染模式 两种渲染模式

Egg + Vue 服务端渲染模式

• 服务端渲染：编写的 Vue 组件在 Node 服务端直接编译成HTML，然后直接输入给浏览器
• 与前端渲染比的优点：
  • 支持SEO
  • 更快的首屏渲染
• 和传统的模板引擎相比的有点：
  • 更好的组件化
  • 前后端模板共用
• 数据驱动，更快的开发效率
• 适用于：有一定交互性，对SEO、首屏速度有要求的业务

前端渲染模式

• 前端渲染模式（浏览器渲染模式）：Node 端只会根据 html、head、body 节点信息的 layout 文件输出骨架内容，页面的实际内容交给浏览器去渲染
• 调用 egg-view-vue-ssr 的 renderClient 方法实现客户端浏览器渲染
  正常情况下，能进行 render 运行的， renderClient 方法也能正常运行
• webpack 配置优化，提高构建速度
  在 ${root}/webpack.config.js 文件添加 target: 'web' 配置选项，这样只会构建浏览器运行的 JSBundle 文件，无需构建 Node 运行的 JSBundle 文件（SSR 模式会构建两份结果，一份给 Node 运行，一份给浏览器运行）

//${root}/webpack.config.js
module.exports = {
  target: 'web'
  ...
}

layout 配置文件

• layout html 文件
  使用 renderClient 进行渲染时，需要存在 ${app_root/app/view/layout.html} layout文件。默认 renderClient 会对 layout HTML 模板进行 Vue 编译；如果不想对 layout HTML 进行 Vue 编译，可以在第三个参数中传入 { viewEngine: null }
• 自定义配置 layout 文件路径，这里的配置是一个全局的 layout 的配置

//${root}/config/config.default.js
exports.vuessr = {
    layout: path.join(app.baseDir, 'app/web/view/layout.html'),
    renderOptions: {
      basedir: path.join(app.baseDir, 'app/view')
    }
 };

• 个性化配置 layout 文件
  使用 renderClient 的第三个扩展参数配置 layout，优先级高于全局 layout 配置