前言

项目终于进入了尾声，这段时间主要在忙公司官网的开发，前段时间我在忙另外一个项目的时候，官网这个项目就启动了，团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网，导致我很难李姐，所以我提出重构项目，由我主导开发，写篇文章记录一下项目信息以及部分关键点。

技术选型

基础框架 & UI库

基于公司前端团队的小伙伴们都是Vuer，所以毫无质疑，使用Nuxt作为基础框架，UI库没有选，因为做的是官网，好多组件的样式都是比较开放的，很多UI库拿来之后，还得再调，太麻烦，自己去写感觉还是比较爽的。当然项目里UI库的开发参考了Element UI 以及 Vant UI的源码，封装了Input、Button、Radio、Form等等，学习+实践。

打包工具

Webpack

移动端适配方案

postcss-px-to-viewport真香

PC & Mobile的切换方案

本身考虑的是做媒体查询，但是奈何优秀的UI同学&产品同学的超高水平，大到整体的布局，小到一个标点符号，都有一定程度的修改，所以如果用媒体查询的话，个人认为：1.开发体验较差 2.可维护性较差 3.工作量大 4. 就很不爽。所以考在考虑多方面因素后，决定做M站（古老的方法，但是真香），PC站 & M站之间的切换方案用的是 Nginx的机型查询。

技术栈归档：

项目架构：Nuxt + Webpack + Self UI（自己的UI）+ Element Ui + Vant Ui
代码风格：esLint + prettier
UE：WoW.js + animate.css + page-transition.css + normalize.css
伪CI/CD（手动狗头）：ssh脚本部署
web服务器：Nginx
进程守护： pm2

前端的同学们可能不太涉及到的点

部署

部署这块，因为我们公司的服务器有限，而且项目比较轻量级，所以部署采用了点对点的SSH部署方式

本地新建.deploy.test.sh

npm run build:test #执行打包命令
tar -zcf dist.tar.gz engconfig.js nuxt.config.js package.json static .nuxt #打一个tar包
sudo scp -i ~/.ssh/id_rsa -r $1 abc@11.22.333.444:/data/......... #上传服务器，$1就是本地dist.tar.gz绝对路径
rm -rf dist.tar.gz .nuxt # 用完删了

prod、stage等等环境同理。

web服务器&进程守护

因为是服务端渲染，我也不是用的generate的打包方式，所以需要在服务器上起一个web server来渲染我的网站，用到了Nginx 和 pm2。

Nginx配置点就是proxy_pass

location / {
    proxy_pass http://localhost:3030
}

pm2启动

pm2 start npm --name "xx" -- run start

基本就是这些

留个预览

【Nuxt】Nuxt做官网要求适配PC&Mobile，我的解决方案

前言