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

最新推荐文章于 2023-02-14 11:43:17 发布

原创

最新推荐文章于 2023-02-14 11:43:17 发布 · 3.4k 阅读

CC 4.0 BY-SA版权

文章标签：

本文回顾了一次使用Vue-cli、VueX和SSR构建大型项目的经历，深入剖析了在高并发场景下面临的内存溢出、多线程、服务器渲染等问题，并详细介绍了如何通过代码优化、多线程、缓存策略及Nginx部署等手段解决问题。

在这里插入图片描述

前言介绍

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

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

在这里插入图片描述

前后端分离
非单页面应用，多页面站点，评估时大概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
根据接口及环境需要，设置必要的环境变量和接口地址
根据开发和生产需要，添加必要的依赖

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLbZNoO7-1591539595651)(../images/hmall-basic.png)]

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