1.0.0 • Published 7 years ago

yqb_vue-ssr v1.0.0

Weekly downloads
2
License
ISC
Repository
-
Last release
7 years ago

vue-ssr

vue-ssr 框架是前端研发部·VUE同构性能小组·推出，实现 vue 2.0 + vue-router + vuex 整合的服务端渲染方案

一、功能介绍

1. 提供 SPA 和 SSR 两种建构及部署方案

  • SPA 为单页面应用实现
  • SSR 为同构应用实现
  • 可根据不同应用项目特性，单独采用单一方案
  • 也可同时部署两套方案，实现使产线服务从 SSR 到 SPA 优雅降级能力，而提高服务的高可靠性

2. 约定 vue-ssr 项目推荐规范目录结构

  • 整个目录结构明显区分 框架 和 应用 代码，唯一的应用目录包含各子应用目录
  • app 应用目录包含各子应用目录，建构独立且同时存在，启用本地调试环境后，可做到相互访问

3. SPA 方案功能

  • 使用 node 本身的 npm run 功能提供建构打包能力，使建构功能更具扩展性
  • 其他特性和 angularjs 框架保持一致，降低学习成本

4. SSR 方案功能

  • 实现 Vue + vue-router + vuex + axio 通用代码的整合
  • 实现 Server 端的数据预加载，做到服务端的首屏渲染
  • 实现基于路由的按需加载（ code splitting ）
  • 实现基于组件的按需加载 todo
  • 实现静态资源的 prefetch 功能
  • 实现切换路由的动画效果 todo

5. 性能优化功能

  • 已实现产线服务具备从 SSR 到 SPA 优雅降级能力，而提高服务的高可靠性
  • 利用合理的建构合并策略配置，实现最大化的公用文件的缓存，提高二次加载性能 todo
  • 实现基于页面 URL 级别的缓存功能，适用于无登陆态情况
  • 实现基于 VUE 组件级别的缓存功能（ async components / code-splitting ）todo
  • 可实现流式渲染实现性能优化，有一定的使用范围限制 todo

二、CLI 介绍

1. SPA

SPA 指纯单页面(single page application)客户端渲染应用

环境配置

# 预先安装依赖模板
npm i

# 配置 bin 目录到环境变量 PATH
vi ~/.bash_profile
export PATH={项目根目录}/bin:$PATH
source ~/.bash_profile

# 添加执行权限
chmod +x spa

查看命令 spa-build / spa-server 帮助

# SPA 建构帮助
spa build -h

# SPA 服务帮助
spa server -h

本地调试环境

# 建构出指定应用项目的 SPA 代码，并监听文件更新
#
# 命令参数说明，详见 `spa build -h`
# 1. env：环境名，可取值为 [development,stg1,stg2,stg3,stg4,stg5,uat,production]，默认为 development
# 2. app-name： 业务项目名，默认为 doc
#
# 建构出的文件存放目录：deploy/spa
#
# 例如 建构出收银台项目 ( app-name = cashier ) 在 development 开发环境下的 SPA 部署代码
spa build --app-name cashier --env development
spa build -a cashier    # 同上简写

# 启动本地开发调试 SPA Server，服务建构到 deploy/spa 目录下的所有文件
#
# 命令参数说明，详见 `spa server -h`
# 1. env：环境名，可取值为 [development,stg1,stg2,stg3,stg4,stg5,uat,production]，默认为 development
# 2. port：服务端口号，默认为 20000
spa server --env development --port 20000
spa server    # 同上简写

建构打包，用于部署线上环境

# 建构出指定项目在指定环境下的部署代码，并压缩成 zip 包，用于部署到 Nignx 静态服务器上
#
# 命令参数说明：同上
#
# 建构出的文件存放目录：同上
#
# 例如 建构出收银台项目 ( app-name = cashier ) 在产线环境下的 SPA 部署代码，并压缩成 ZIP 包
spa build --env production --app-name cashier
spa build -e uat -a cashier     # 同上简写

# SPA ZIP 包须知：
# 1. SPA ZIP 包会部署到 对应线上环境的 Nignx 静态服务器下，提供静态资源服务
# 2. 怎么验证 SPA ZIP 包的正确性，可查看文档[怎么开发SPA新项目]

SPA ZIP 包说明

包命名规范：

h5-v-{appName}_{envName}.zip，

为了区别不同框架，统一在包名中加了框架名的前缀 v，代表 VUE 框架建构。 例如，收银台项目为 h5-v-cashier_uat.zip

特例: 框架项目 doc 的 Zip 包名为 h5-v_{envName}.zip, 在文档的高级部分会详细说明

包部署规范

SPA ZIP 包会部署到 对应线上环境的 Nignx 静态服务器下，提供静态资源服务。

包命中的-代表目录，因此

如 h5-v-cashier_uat.zip 会部署到 webroot/h5/v/cashier 目录下

包验证

为了减少上产线的问题，特别是新项目，就需要在本地先进行产线 SPA ZIP 包的正确性验证！ 由于本地环境验证的配置比较复杂，就不在本节说明，可查看文档怎么开发新项目

2. SSR

服务端渲染的同构页面应用

环境配置

# 预先安装依赖模板
npm i

# 配置 bin 目录到环境变量 PATH
vi ~/.bash_profile
export PATH={项目根目录}/bin:$PATH
source ~/.bash_profile

# 添加执行权限
chmod +x ssr

查看命令 ssr-build / ssr-server 帮助

# SSR 建构帮助
ssr build -h

# SSR 服务帮助
ssr server -h

本地调试环境

# 建构出指定应用项目的 SSR 代码，并监听文件更新
#
# 命令参数说明，详见 `ssr build -h`
# 1. env：环境名，可取值为 [development,stg1,stg2,stg3,stg4,stg5,uat,production]，默认为 development
# 2. app-name： 业务项目名，默认为 doc
#
# 建构出的文件存放目录：deploy/ssr/
#
# 例如 建构出收银台项目 ( app-name = cashier ) 在 development 开发环境下的 SSR 部署代码
ssr build --app-name cashier --env development
ssr build -a cashier    # 同上简写


# 启动本地开发调试 SSR Server，服务建构到 deploy/ssr 目录下的所有文件
#
# 命令参数说明，详见 `ssr server -h`
# 1. env：环境名，可取值为 [development,stg1,stg2,stg3,stg4,stg5,uat,production]，默认为 development
# 2. port：服务端口号，默认为 20000
ssr server --env development --port 20000
ssr server    # 同上简写

建构打包，用于部署线上 Node 服务

# 建构出指定项目在指定环境下的部署代码，并压缩成 zip 包，用于部署到 Node server 规范目录下
#
# 命令参数说明：同上
#
# 建构出的文件存放目录：同上
#
# 例如 建构出收银台项目 ( app-name = cashier ) 在产线环境下的 SPA 部署代码，并压缩成 ZIP 包
ssr build --env production --app-name cashier
ssr build -e uat -a cashier     # 同上简写

# SSR ZIP 包须知：
# 1. SSR ZIP 包会部署到 对应线上环境的 Node server 同构服务器下，提供页面URL访问服务
# 2. 而页面上引用的镜头资源，都会在 SPA ZIP 包中，会通过 URL 访问到 Nignx 服务上
# 3. 怎么验证 SSR ZIP 包的正确性，可查看文档[怎么开发SSR新项目]

SSR ZIP 包说明

包命名规范：

h5-v-{appName}_{envName}.node.zip，

  • 为了区别不同框架，统一在包名中加了框架名的前缀 v，代表 VUE 框架建构。
  • 加上.node 关键词，代表 SSR Node ZIP 包。

例如，收银台项目的 UAT 环境部署包为 h5-v-cashier_uat.node.zip

特例: 框架项目 doc 的 Zip 包名为 h5-v_{envName}.zip, 在文档的高级部分会详细说明

包部署规范

SSR ZIP 包会部署到 对应线上环境的 Node 服务器下，提供页面同构渲染服务。

包命中的-代表目录，因此

如 h5-v-cashier_uat.node.zip 会部署到 {linux 安装目录}/www/h5/v/cashier 目录下

三、项目结构

对于大型应用，推荐的项目结构示例：

# 一级目录
├── .babelrc        # babel 配置文件
├── .editorconfig   # 编辑器格式化统一配置文件
├── deployed        # 建构打包文件目录
├── bin             # 建构及服务启动脚本运行文件目录
├── config          # 配置文件目录，如数据配置文件，webpack 配置文件
├── middleware      # ssr 服务端渲染中间件，同 Express.js 中间件
├── src             # 项目源码总目录
    ├── framework       # 框架层代码文件目录，具体内部结构见下
    ├── app             # 业务项目层目录
        ├── cashier         # cashier 收银台业务项目目录，具体内部结构见下
        └── ...             # 其他业务项目目录

## 框架目录结构
├── framework       # ssr 框架代码文件总目录，存放如内部组件模块
    ├── components      # 框架公用组件模块
    ├──
    └── store           # vuex store 数据目录

## 具体每个应用目录结构
├── cashier         # cashier 收银台业务项目目录
    ├── index.html      # SPA 入口页面
    ├── index.ssr.html  # SSR 入口页面
    ├── app.js          #
    ├── App.Vue         #
    ├── entry-client.js #
    ├── entry-server.js #
    ├── api             # 后台 api 服务目录
        └── cart.js         # 具体业务模块: 购物车模块的 API 请求
    ├── components      # 业务子模块 vue 组件目录
    ├── pages           # 页面容器 vue 组件目录
    ├── router          # 路由目录
    └── store           # vuex store 数据目录
        ├── index.js        # 根 store 模块导出文件
        ├── actions.js      # 根级别的 action
        ├── mutations.js    # 根级别的 mutation
        └── modules         # 子 store 目录
            ├── cart.js         # 具体业务模块: 购物车模块 store
axiosvuevue-routervuex
1.0.0

7 years ago