部署vue项目

一、项目简介与技术栈

1、WebApp（H5项目）

• 技术栈：vue、vue-router、vuex、vant、sass、rem。
• 主要功能：首页商品列表、下拉刷新、触底加载、分页；品类搜索（vuex实现缓存）；购物车、登录鉴权、注册；个人中心，地址簿管理等。

2、管理系统（PC项目）

• 技术栈：vue、vue-router、vuex、element-ui、sass、socket.io-client
• 主要功能：登录鉴权、权限管理；商品的增删改查、图片上传；Socket通信服务等。

3、Node RESTful API

• 技术栈：node.js、express、ejs、mongoose
• 主要功能：登录、注册、token鉴权、权限管理、商品管理、购物车（订单）管理、地址簿管理等。

WebApp（H5项目）

管理系统（ PC项目）

二、上线前准备

1、域名购买、备案、DNS解析

在阿里云注册账号，购买.com域名一个。在阿里云控制台中，点击“备案”，进入备案专区，提交备案资料（协议复印件照片、身份证复印件照片、备案幕布拍照照片等）。

初次备案，需等待21个工作日出备案结果。备案成功后，可以拿到 ICP主体备案号，在网站开发时，将其添加到网站底部。

进一步，使用阿里云免费的 DNS 解析服务，完成域名到云服务器IP地址的解析（你得先买一台 ECS云服务器，见下方内容）。

域名解析

• www 配置PC官网、Node数据库服务
• m 配置 H5官网
• oa 配置管理系统网站
• cdn 配置图片服务

2、购买一台云服务器

购买ECS云服务器

有了云服务器，就有了公网IP和私网IP，上文中的域名解析服务，就要用到公网IP。我买的云服务器是 CentOS 7.4 64位。

使用 XShell 或者其它 SSH 工具即可远程连接云服务器，进一步安装你所需要的软件和应用程序。在 Git Bash 中，可以使用 ssh 命令进行连接。