vue博客实战---博客部署到腾讯云

前三篇文章其实已经将博客部分的功能基本上走了一遍流程，博客部分还剩下的只有首页右侧导航栏动态渲染以及文章详情界面带评论功能尚待开发。本篇文章准备讲讲博客的部署，本篇涉及的知识点前端vue打包部署到nginx，后端Node部署并使用PM2进行进程管理。并且对vue首屏加载过慢做了适当的优化，提高首屏加载速度。

首先我们需要在服务器搭建前后端环境，我们需要的环境具体有：node.js，PM2，nginx，mysql。我的版本是centos 7.2版本，之前有专门写过一篇文章介绍linux环境的配置：玩转服务器---运行环境搭建，如果需要搭建环境的可以参考本篇文章进行对应环境的搭建。

在开始部署博客之前，我们需要在本地安装XShell用来连接服务器进行pm2进程管理，FileZilla用于将本地项目上传到服务器。软件准备好，首先我们需要在腾讯云解析两个域名，解析到服务器对应的公网ip：

www.niyueling.cn：博客首页地址
pic.niyueling.cn：上传图片的图片主路径

首先我们需要去nginx.conf配置pic.niyueling.cn指向图片存放主目录，而后端图片上传主目录定义在/mnt/niyueling/，所以首先配置pic.niyueling.cn指向/mnt/niyueling/目录：

配置完图片上传路径，进入vue项目文章发表界面articleEdit.vue，将上篇文章图片上传成功返回的图片url前缀改成http://pic.niyueling.cn:8080

接下来，可以开始vue项目的打包。进行根目录，执行命令：

npm run build --report

--report可以在打包项目成功打开资源分析界面，会显示打包后每个文件的大小：

项目打包成功，会在项目根目录生成一个dist文件夹，我们接下来需要将dist文件夹上传到服务器，我们通过FileZilla将dist文件夹上传至nginx的html文件夹下，关于FileZilla的基本使用可以查看另一篇文章：玩转服务器---基本工具的使用：

可以看到我已经成功将vue项目打包生成的dist文件夹上传至服务器，记下来打开nginx.conf文件配置www.niyueling.cn域名指向dist文件夹下的index.html：

前端项目配置完我们可以打开XShell测试下nginx.conf配置文件有没有问题，使用命令：

nginx -t

若出现图中提示配置文件ok，则重启nginx。执行命令：

nginx -s reload

我们可以尝试访问www.niyueling.cn，看是否可以加载出博客首页。

可以看到首页加载出来，但是后端服务出现异常了。原因在于后端Node项目还未部署。使用FileZilla将Node项目部署到/opt下：

blog_back就是我部署的后端项目，我们需要使用PM2进行后端进程的管理与监控。这里直接贴上一些PM2的常用命令：

1. pm2 start xxx.js --name xxx 启动xxx.js进程并进行重命名 pm2 restart xxx.js 更新代码后，使用restart命令重启xxx.js进程 pm2 stop all 停止所有进程 pm2 stop xxx.js 停止xxx.js进程 pm2 stop 0 停止id为0的进程 pm2 list 查看所有当前正在运行的进程 pm2 show 0 查看id为0的进程 pm2 logs 0 显示id为0 的进程日志 pm2 logs xxx.js 显示xxx.js进程的日志 pm2 logs 显示所有日志

接下来我们来看看如何使用这些命令，首先在XShell中启动我们的后端进程，项目启动文件放置在bin文件夹的www文件，所以进入bin文件夹使用pm2 start ./www --name server，可以启动我们刚才上传的server项目并将启动的服务进程重命名为server。然后使用pm2 list可以看到我们当前有一个进程属于启动状态，status就是进程的状态，online就代表正常启动成功，error就代表代码出错，可以查看日志看报错信息，stop就代表进程属于停止状态。

可以看到后台服务部署成功，我们可以再次访问博客首页看看效果：

首页效果出来了，博客的基本功能都可以正常使用，但是陷入了一个异常严重的问题：首屏加载过慢，粗略计算需要10秒左右才可以加载出首页。现在难免的我们需要考虑如何优化首屏加载速度。其实用过前端框架的都知道，SPA最大的缺点就是首屏加载时间过长，那具体如何对vue项目进行优化呢？

首先第一步优化打开index.js，我们可以看到我们引入界面vue文件都是使用import xxx from xxx，这种方式引入组件会在首屏加载的时候一次性加载所有组件，所以我们需要将组件引入方式改成按需加载，仅当页面要使用才进行加载对应的组件：

接着我们开启gzip压缩，打开config/index.js文件，设置productionGzip为true:

然后打开build/webpack.prod.conf.js文件，添加Gzip配置：

最后打开nginx.conf文件，在http节点下添加Gzip配置：

对vue项目做了这两点优化，我们重新部署替换服务器的dist文件夹，再次访问首页进行测试：

可以看到目前首页加载在2秒左右，符合一般访问要求了。到这里我们博客部署就完成了，下一篇将对注册接口添加短信验证码验证以及博客详情界面开发。