记一次惨痛的Vue-cli + VueX + SSR经历

记一次惨痛的Vue-cli + VueX + SSR经历

前言介绍

此篇写于一年前，当时仅作为自己的个人项目总结，现在换了工作，就把之前的一些经验或教训发出来，以警后人，也为大家碰到相同问题时提供解决方案，或多或少有帮助您就点个赞，如果有问题或更好的解决方式请在评论中指出或关注公众号给我留言，感谢指点。

总部提出新项目，大致需求就是APP内置一个H5商城，于是开始出差去总部极限开发，可没想到碰到的问题让我一个工作经验只有半年多点的应届生熬了好几宿。

技术选型

• 项目语言：HTML、CSS、JavaScript
• 项目框架：Vue.js
• 项目搭建脚手架：Vue-cli
• 工程化工具：Webpack、Sass、Npm
• 源码管理：Gitlab
• 运行环境：Browser & Node(PM2)
• 第三方服务：GrowingIO、高德地图、ECharts

技术方案

• 前后端分离
• 非单页面应用，多页面站点，评估时大概30多个页面，极限开发，直接使用 Vue-cli
• 产品考虑SEO，使用 VueX 做 SSR ( Vue 做 SSR 后续我会出文章说明实现方式和一些坑，有兴趣的可以点击关注获取最新文章)
• 便于开发，使用 sass 等工程化工具
• 确定开发规范和代码规范
• 根据项目需要，封装 user.js(针对用户信息存储), base.js(基础公共JS文件), url.js(针对url的操作), http.js(二次封装axios)
• 根据项目需求，抽象组件(compoments)和插件(widgets)注册到Vue实例
• 根据项目需要，合理设置Router和Page
• 根据接口及环境需要，设置必要的环境变量和接口地址
• 根据开发和生产需要，添加必要的依赖

以Node为服务器版本项目架构

• 整个网站的架构采用横向分层，从上往下越来越抽象，引用关系由上至下，拒绝由下至上的引用。
  • 语言&环境
  • 框架层
  • 业务公共层
  • 应用层

语言&环境

• 语言：
  • 采用 Html和 HTML5 控制各个模块的结构；
  • 采用 Sass 做样式的预处理；
  • 采用 ECMAScript 6 来开发逻辑和交互，然后通过 Webpack 和 Babel 将高级版本的 JS 编译成当下流行浏览器能够解析的 ECMAScript 5。
• 环境：
  • Web 前端的代码主要运行在浏览器端，但是也能在 Node 环境运行，通过 Vue-ssr Node 端插件，同样的前端代码也可以通过服务器端将 Html 渲染出来。
  • 正式的部署中，Node 的进程管理是通过 PM2（process manager 2），它可以帮你检查进程的健康情况，并提供强大的接口，让你很容易的了解 Node 在服务器中的运行情况。

框架层

• 框架层主要解决：算法、存储、通讯和 UI 4 大问题。
  • Vue
• 核心框架采用 Vue 及其 Vue