Skip to content

Latest commit

 

History

History
58 lines (38 loc) · 2.63 KB

README.md

File metadata and controls

58 lines (38 loc) · 2.63 KB

Vue-SSR-Demo

basic contraction of vue-ssr project

📝Desc

本 repo 只包含一个简单的 Vue SSR 样例,重点在于展示服务端渲染应有的基本配置

由于服务端渲染的配置几乎包含了现代前端构建的所有知识,所以我想借这个项目抽离出具有普适性的基础结构,并方便以后的使用

我额外写了几篇关于这个构建过程的总结,其中包括 Webpack 中间件的源码解析,希望对你有所帮助:

上篇 介绍开始一个 Vue SSR 项目所需的基础配置

中篇 介绍 Vue SSR 应用如何与 Koa2 服务器结合

下篇 重点总结基于 Webpack4 和 Koa2 的开发模式,其中涉及中间件的适配

devMiddleware 源码解析 总结在适配webpack-dev-middleware中间件过程中我所学到的

hotMiddleware 源码解析 总结在适配webpack-hot-middleware中间件过程中我所学到的

✨Features

这个基础结构提供了以下功能:

  • 基于.vue文件
  • vue-router共用路由
  • 基于 Wepack4 的构建配置
  • 一个 Koa2 服务器
  • micro-cacheing缓存策略
  • @koa/router中间件提供路由功能
  • koa-static-server中间件提供文件服务
  • 基于 Webpack4 和 Koa2 的开发模式

🚨Notes

  • 本 repo 使用 webpack v4+,某些你所熟知的配置,例如 webpack.optimize.CommonsChunkPlugin 会不可用,具体的迁移须知参考To v4 from v3

  • 本 repo 使用 webpack v4+,其中将 es6 模块导出为 commonjs2 模块时会将导出函数或默认(default)内容挂载在 module 对象上,这会导致 createBundleRenderer 无法创建 renderer(已知的 vue-server-renderer v2.6.11 版本),而不是像 Vue-SSR 文档那样覆盖 module 对象,所以在 server.entry.js 中我们直接使用了 commonjs2 模块做 “中间适配”

  • 使用时请确保某些构建工具的版本,例如 Vue 文件编译器 vue-template-compiler 必须与 vue 版本匹配

📦Build

# install dependencies
npm install

# build for production with minification
npm run build

# dev mode in webpack4
npm run dev

# start the production node server
npm run start

📄LICENSE

MIT.