【源码】基于 Egg.js 和 Vue.js 的 Webpack 多模式渲染应用框架

项目简介

本项目是基于 Egg.js 框架和 Vue.js 前端库的服务器端渲染（SSR）模板项目，借助 Webpack 进行构建与优化。采用 Vue 2 版本和 Vue Router 对页面路由及视图组件进行分割管理，提供服务端渲染、前端渲染和静态页面渲染三种方式，可快速搭建具备服务端渲染特性的单页或多页应用。

项目的主要特性和功能

主要特性

1. 支持服务端、前端、静态页面三种渲染模式。
2. 支持单页和多页应用的服务端与前端渲染。
3. 代码修改时，Webpack 可实时编译和热更新，通过 npm start 一键启动应用。
4. 基于 vue + axios 实现多页面服务端和客户端渲染同构，基于 vue + vuex + vue-router + axios 实现单页面服务器客户端同构。
5. 基于 easywebpack 基础配置，运用 es6 class 继承方式编写 Webpack 配置和 cli 构建。
6. 支持 Js/Css/Image 资源依赖，内置 CDN 特性。
7. 支持 css/sass/less 样式编写。
8. 支持根据 .vue 文件自动创建 entry 入口文件。
9. 支持 Vue 组件异步加载。
10. 支持 Node 4+ 版本，包含 Node 8 的 async 和 await 特性。

功能实现

1. 多页面服务端渲染/前端渲染同构：在 app/web/page 目录创建页面组件，使用 egg-view-vue-ssr 插件的 render 方法实现服务端渲染，renderClient 方法实现前端渲染。
2. 单页面服务器渲染同构：在 app/web/page 目录创建单页组件和入口文件，通过路由配置和服务端渲染逻辑实现。
3. HTML 静态页面前端渲染：通过 Webpack 构建静态 HTML 文件，利用 egg-static 静态文件服务访问。

安装使用步骤

安装 cli

bash npm install easywebpack-cli -g

安装依赖

bash npm install

启动应用

bash npm start 应用访问地址：http://127.0.0.1:7001

项目构建

```bash npm start

npm run build-dev 或者 easywebpack build dev

npm run build 或者 easywebpack build prod ```

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】