Egg + Vue 服务端渲染开发指南

1. 项目初始化

1.1 通过 easywebpack-cli 脚手架初始化

1. 安装脚手架 npm install easywebpack-cli -g 命令行，然后就可以使用 easywebpack 或 easy 命令

2. 命令行运行 easywebpack init

3. 选择 egg+vue server side render boilerplate 初始化骨架项目

4. 安装依赖 npm install

1.2 通过骨架项目初始化

git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git
npm install

初始化的项目提供多页面和SPA(vue-router/axios)服务端渲染实例，可以直接运行。

2. 项目运行

2.1 本地运行

npm start

npm start 做了如下三件事情

• 启动 egg 应用
• 启动 Webpack 构建, 文件不落地磁盘，构建的文件都在内存里面(只在本地启动, 发布模式是提前构建好文件到磁盘)
• 构建会同时启动两个 Webpack 构建服务, 客户端js构建端口9000, 服务端端口9001
• 构建完成，Egg应用正式可用，自动打开浏览器

2.2 发布模式

• 构建文件落地磁盘

npm run build 或 easywebpack build prod

1. 启动 Webpack 构建，文件落地磁盘
2. 服务端构建的文件放到 app/view 目录
3. 客户端构建的文件放到 public 目录
4. 生成的 buildConfig.json 和 manifest.json 放到 config 目录

5. 构建的文件都是gitignore的，部署时请注意把这些文件打包进去

   • 运行

启动应用前， 请设置 EGG_SERVER_ENV 环境变量，测试环境设置 test， 正式环境设置 prod

npm start

3. 项目构建

• 通过 easywebpack-cli 统一构建，支持 dev，test，prod 模式构建

• easywebpack-cli 通过项目根目录下的 webpack.config.js 配置文件构造出 Webpack 实际的配置文件，配置项请见 webpack.config.js

• 获取 Webpack 实际的配置文件, egg-webpack 会使用到该功能。构建会根据 webpackConfigList.length 启动对应个数的 Webpack 编译实例，这里会同时启动两个 Webpack 构建服务, 客户端jsbundle构建，端口9000, 服务端jsbundle构建端口9001。默认端口为9000, 端口依次递增。

// config/config.lo