共计 3116 个字符，预计需要花费 8 分钟才能阅读完成。
一、前言提纲
基于 Vue 和 Express 框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。
二、历史版本
- 基于 Vue-CLI2.0: 点我查看
这个分支版本是一两年前的，基于 Vue-CLI2.0 写的，数据请求是 Mock，纯前端的项目。 - 基于 Vue-CLI3.0: 点我查看
这个分支版本是基于 Vue-CLI3.0 的，将脚手架从 2.0 迁移升级到了 3.0，遇到的一些问题和坑也都填完了~ 也是纯 Web 端 Mock 模拟数据的项目。 - 当前版本: 点我查看
基于 Vue-CLI3.0, 前端用 Vue 全家桶，后端用 Express+MongoDB+Redis，后台管理系统 CMS 是用的 Vue-Element-Admin
三、详情
1. 前端
在线预览:https://www.fancystore.cn
手机直接扫描二维码真机体验:
1.1 技术栈:
- Vue 全家桶(Vue-CLI3,Vue2.x)
- Vue-Router(页面 KeepAlive 的处理)
- Vuex(状态管理库，刷新保存状态)
- Axios(二次封装配置的数据请求)
- Less(CSS 预处理)
- I18n(国际化处理)
- Vant(UI 库, 按需加载 +rem)
- SEO(预渲染)
- Sentry(线上错误日志监控)
- Travic(自动构建, 持续部署)
1.2 适配
项目代码 px 自动转换为 rem，需要在 main.js 中引入 amfe-flexible 库
Vant UI 库也有 REM 单位，需要在 vue.config.js 中配置:
1.3 SEO
单页 (SPA)SEO 是一个痛点，目前有两种方式，一种是SSR, 一种是 预渲染(PrerenderSPAPlugin)。
这个项目是用 预渲染 (PrerenderSPAPlugin)+vue-meta-info 这两个库来做 SEO 优化的。
- 将 rouer.js 模式改为mode:history
- 下载安装 PrerenderSPAPlugin
PrerenderSPAPlugin 是 Google 的一个库，基于 Chromium 是获取数据，安装 PrerenderSPAPlugin 的时候会自动下载 Chromium 浏览器，国内 npm 安装 Chromium 会经常安装失败，建议用淘宝的 cnpm 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install PrerenderSPAPlugin --save
- 在 vue.config.js 中引入PrerenderSPAPlugin，配置需要预渲染的路由。
- 下载安装 vue-meta-info
在 main.js 中引入 vue-meta-info，在每个页面配置 meta 信息，这样每个单页路由都有不同的 title, 理由爬虫引擎抓取重要内容，利于 SEO。
预渲染前只有一个 index.html, 预渲染后最后打包出来的预渲染目录文件如下:
1.4 路由懒加载以及缓存 keep-alive 动的态判断
项目中会使用 keep-alive 会提高用户体验和网站的性能, 如果想实现部分页面缓存，部分页面不需要缓存，可以在 router.js 里面的路由添加 meta.keepalive 在跟 router-vier 加入判断:
1.5 Vuex 状态管理页面刷新失效问题
用 Vuex 管理全局的状态，会遇到刷新页面的时候所有的状态丢失或者重置，可以在 App.vue 的钩子函数添加代码，会在页面刷新的时候将 Vuex 存储到 Storage 中，刷新完成后又再从 Storage 取出来存到 Vuex 里面:
1.6 封装数据请求
封装 Axios，添加 Axios 请求 (request) 和相应 (response), 统一处理错误信息或者登录认证的消息, 所有的数据请求都存放到api 目录下，对应的页面方便后续的维护和管理。
1.7 打包构建优化 vue.config.js
- 区分开发环境和生产环境
- alias 的方式直接指定目录。
- CDN
生产环境中将一些共有库 Vue,vuex,vue-router 等库不打包到项目中，而是通过 CDN 的方式引入这些共有库，这样可以减少项目的大小，也可以借助 CDN 的优势，让网站加载更快。推荐一个强大的 cdn 库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/) - 生产环境压缩和出去 console 打印日志
- 生产环境开启 gzip 压缩
- 生产环境启用预渲染
- 生产环境分离 css，外链 CSS 可以缓存
1.7 错误日志监控 Sentry
集成 Sentry 开源日志监控系统，在官网注册获取 key，在main.js 中引入 RavenVue 并配置即可
1.8 自动构建和持续集成
Github 自动构建和持续集成基于 Travis
- 登录 Travis 选择需要持续集成的项目。
- 在.travis.yml 写上相应的 config, 服务器配置 ssh_key，
- 每次代码 push 到指定分支 (比如 master) 的时候，Travis 会自动执行项目上的.travis.yml 文件，开始自动构建，构建成功通过 scp 密令传送到服务器，完成自动部署的功能。
每次需要发版，只需要 push 代码，然后去喝杯咖啡，回来就已经构建发布完成，解放劳动力
1.9 代码自动格式化优化
团队合作的时候，每个成员用的编辑器不同，缩进格式也不同，这样合并代码的时候会出现各种意外的情况，团队统一编辑器和编辑器不太现实，因为每个人的写代码习惯和风格不一致。可以借助 husky 和 link-stage，每次 commit 的时候都会安装配置的规则格式化代码，参考文章:https://segmentfault.com/a/1190000009546913
1.10 代码优化
- 设计模式
表单验证需要写很多判断条件，if-else 或者 swith，当条件越多时或者后面需要修改需求条件的时候，会变得不是很好维护，可以用 策略模式 来重构业务代码:
- 善用 Mixin, 提取共用的组件，将项目组件化
Vue 的 Mixin 复用代码，可以更好的提高开发效率和可维护性
除了将一些共用的页面做成组件引入的方式之外，大文件项目也分好几个模块，将文件才成模块的方式会更好维护和更好的阅读。
2. 服务端
2.1 技术栈:
- Node
- Express
- Mongo
- Mongoose
- Redis
- Qiniu
- PM2
2.2 登录授权
用 Session 认证机制，来实现登录登出。
配置 Session 的加密解密，将 Session 存储到 Redis，提高性能, 如果有多台服务器，Redis 可以共享 Session。
2.3 中间件判断用户是否登录:
有些 API 请求是需要用户登录才可以访问的，可以写中间件来判断:
2.4 中间件判断用户的权限:
有些 API 的请求是需要判断用户是否有权限，比如添加、删除和更新，会在中间件判断是否有权限
2.5 PM2 多进程启动项目
2.6 Mongodb 优化设置索引
2.7 Redis 做缓存
2.8 七牛云对象存储配置 Key 还有域名的绑定以及 HTTPS 证书的申请
3. 后台管理系统 CMS
在线预览:https://www.fancystore.cn/admin
3.1 技术栈
vue-element-admin
配合后端做了权限系统，根据用户的权限来展示和隐藏菜单和按钮。
4. 服务器
- Nginx 配置 gzip 和缓存策略，根据不同的 URL 来代理。
- 申请 HTTPS 证书, 全站升级到 HTTPS，配置 HTTP2.0 的协议。
Github:
前端: https://github.com/czero1995/fancy-store
服务端: https://github.com/czero1995/fancy-store-server.git
后台管理 CMS: https://github.com/czero1995/fancy-store-admin.git
