1.前言大纲基于Vue和Express框架编写的全栈商城，记录项目过程中遇到的一些问题以及心得和技巧。2、历史版本基于Vue-CLI2.0：点我查看这个分支版本，是一两年前基于Vue-CLI2.0写的。数据请求是Mock，纯前端项目。基于Vue-CLI3.0：点我查看这个分支版本是基于Vue-CLI3.0的，脚手架已经从2.0迁移到3.0，遇到的一些问题和坑也被填补了~也是一个纯web端模拟模拟数据的项目。当前版本：点我查看基于Vue-CLI3.0，前端使用Vue全家桶，后端使用Express+MongoDB+Redis，后台管理系统CMS使用Vue-Element-AdminIII。详情一、前端在线预览：https://www.fancystore.cn手机直接扫描二维码真机体验：1.1技术栈：Vue全家桶（Vue-CLI3、Vue2.x）Vue-Router（处理ofpageKeepAlive）Vuex（状态管理库，刷新保存状态）Axios（二次打包配置的数据请求）Less（CSS预处理）I18n（国际化处理）Vant（UI库，按需加载+rem）SEO（预渲染）)Sentry（在线错误日志监控）Travic（自动构建，持续部署）1.2适配项目代码px自动转为rem，需要在main.js中引入amfe-flexible库。VantUI库也有REM单元，需要在vue.config.js中配置：1.3SEO单页（SPA）SEO是一个痛点。目前有两种方式，一种是SSR，一种是预渲染（PrerenderSPAPlugin）。本项目使用预渲染（PrerenderSPAPlugin）+vue-meta-info这两个库进行SEO优化。将rouer.js的mode改为mode:history下载并安装PrerenderSPAPluginPrerenderSPAPlugin是Google的一个库，基于Chromium获取数据。安装PrerenderSPAPlugin时，会自动下载Chromium浏览器。国内npm安装Chromium经常会安装失败。推荐使用淘宝的cnpm安装npminstall-gcnpm--registry=https://registry.npm.taobao.orgcnpminstallPrerenderSPAPlugin--save在vue.config.js中引入PrerenderSPAPlugin来配置需要预渲染的路由。下载安装vue-meta-info在main.js中引入vue-meta-info，在每个页面配置meta信息，让每个单页路由有不同的title，因为爬虫引擎爬取的是重要的内容，这个不错用于搜索引擎优化。预渲染前只有一个index.html。预渲染后最终打包的预渲染目录文件如下：1.4路由懒加载和缓存keep-alive动态判断在项目中使用keep-alive会提升用户体验和网站性能，如果想实现部分页面缓存，部分页面不需要缓存，可以在router.js中的route中添加meta.keepalive，并用router-vier添加判断：1.5Vuex状态管理页面刷新失败问题使用Vuex管理全局状态时会页面刷新，所有状态丢失或重置。可以在App.vue的hook函数中添加代码，页面刷新时Vuex会存储到Storage中。刷新完成后，会从Storage中取出，存放到Vuex中。inside:1.6封装数据请求封装axios，添加axios请求（request）和响应（response），统一处理错误信息或登录认证信息，所有数据请求都存放在api目录下，对应页面方便后续维护和管理。1.7打包构建优化Vue.config.js通过区分开发环境和生产环境的别名直接指定目录。在CDN生产环境中，一些Vue、vuex、vue-router等常用库并没有打包到项目中，而是通过CDN引入这些常用库，可以减少项目体积，也可以利用优势CDN使网站加载速度更快。推荐一个强大的cdn库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)生产环境压缩输出到控制台打印日志生产环境启用gzip压缩生产环境启用预渲染production环境分离css，外链css可缓存1.7错误日志监控Sentry集成Sentry开源日志监控系统，官网注册获取key，在main.js引入RavenVue并配置1.8自动构建和持续集成Github自动构建和持续集成基于Travis登录Travis选择需要持续集成的项目。在.travis.yml中写入相应的config，并在服务端配置ssh_key。每次将代码推送到指定分支（如master），Travis会自动执行项目上的.travis.yml文件，开始自动构建。构建成功通过scp密码发送到服务器，完成自动部署的功能。每次需要发布一个版本，只需要推送代码，然后去喝杯咖啡，回来时构建和发布已经完成，解放劳动力1.9自动代码格式化和优化当在一个团队中工作，每个成员使用不同的编辑器，缩进格式也不同。不同的是，这样合并代码的时候，会出现各种意想不到的情况。团队统一编辑编辑不太现实，因为大家的写作习惯和风格都不一致。借助husky和link-stage，每次commit都会安装配置的规则格式化代码，参考文章：https://segmentfault.com/a/11900000095469131.10代码优化设计方式表单验证需要写很多的判断条件，if-else或者switch，当条件比较多或者后面需要修改需求条件的时候，就会变得难以维护。可以使用策略模式重构业务代码：用好Mixin，提取通用组件，把项目变成Vue组件Mixin重用代码可以更好的提高开发效率和可维护性。除了将一些共享页面作为组件导入外，大文件项目也分为几个模块。最好将文件分成模块。维护和更好的阅读。2.Server2.1技术栈：NodeExpressMongoMongooseRedisQiniuPM22.2登录授权使用Session认证机制实现登录和注销。配置Session的加解密，将Session存储在Redis中，提高性能。如果有多个服务器，Redis可以共享Session。2.3中间件判断用户是否登录：有些API请求需要用户登录才能访问，可以写中间件判断：2.4中间件判断用户权限：有些API请求需要判断用户是否有权限，2.5PM2多进程启动项目2.6Mongodb优化设置索引2.7Redis作为缓存2.8七牛云对象存储配置Key和域名绑定及HTTPS证书申请3.背景管理系统CMS在线预览：https://www.fancystore.cn/admin3.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
