使用Vue开发项目时通常是前后端分离的，这样就前后端各有一个地址，用户访问的是前端的地址，即前端路由，前端再向后端地址请求页面数据然后渲染页面。本文简单介绍通过Apache2部署前端项目到服务器，以及如何将本地项目自动推送到远程服务。
我的服务器系统版本 ubuntu16.04，如果你的也是ubuntu应该差别就不大。这里我用的服务器是国外的Vultr云服务器 ，平时就随便玩玩(科学上网)还可以，关键是比阿里云便宜太多而且科学上网不会收到警告(竟然是一句广告！)。
以下分步介绍服务器部署以及远程同步项目。
1. 安装Apache2
无意外的话安装好就自动启动了，浏览器地址栏输入ip或者域名就能够看到Apache2服务的默认页面了。
Apache2默认访问的文件路径是/var/www/html，会返回该路径下的index.html文件内容给浏览器。
2.更改服务器访问目录
Apache2的配置文件为/etc/apache2/sites-available/000-default.conf。
vim打开：
看到DocumentRoot即为服务根目录，我们修改为我们想要的目录同时增加权限相关配置（Directory标签中的内容，如果没有权限配置，访问会被拒绝）：
这里我们用一个创建一个简单的index.html文件来测试目录更改是否成功：
在浏览器访问ip或者域名：
访问成功！
3. 设置免密ssh连接远程服务器
以上步骤简单地搭建了web服务，但是要把我们自己的项目放到服务器上还是比较不方便。最开始我是通过git来传输，本地build后把项目push到github，然后再在远程服务器将代码pull下来并且把服务访问路径修改为build后的/dist路径。这种方式太过麻烦，后来请教了别人学会了更好的方式。
对于一个Vue项目，通常build后的代码目录为/dist，所以我们只要把/dist复制到Apache2服务的访问目录即可。接下来看看怎样推送本地代码到远程服务。
这里使用linux的rsync命令（如果是windows系统的git Bash或者PowerShell，可以自行百度怎么安装该命令），rsync命令可以将本地文件与远程文件对比，传送文件中不同的部分，因此同步速度杠杠的。关于rsync命令详细用法，可参考linux命令大全。
这里rsync通过ssh方式向远程服务器同步文件，为了快捷，我们设置ssh免密方式传输：
①本地生成ssh公钥：
如果已有密钥，命令执行过程中会询问是否覆盖，可以使用已有的密钥，也可以覆盖生成新密钥。命令会在~/.ssh文件夹下生成密钥对id_rsa和id_rsa.pub，分别为私钥和公钥，我们只要把公钥放到远程服务器的~/.ssh/authorized_keys里即可实现本机和远程服务器的ssh免密连接。
②将本机ssh公钥放到远程服务器上。
你可以试试rsync（更好的办法是使用ssh-copy-id指令，不过这里为了介绍一下rsync），rsync 的基本使用格式为rsync (-options) srcfile destip:destfile，options是可选的：
可以登录远程服务器查看同步是否成功。
现在再使用ssh连接远程服务器，顺利的话可以不用密码了。如果遇到下面的报错：
然后依旧要求输入密码，原因是生成的密钥没有加到ssh agent，此时只需在本机执行以下命令：
ssh-add ~/.ssh/id_rsa然后重新执行即可。
注: 复制公钥到远程主机更好的方式为ssh-copy-id指令，该指令将本地公钥追加到远程主机的.ssh/authorized_keys文件中，使用方式如下。
现在回到Vue前端项目，怎样构建完成自动同步到远程服务器？我们只需要在项目目录下添加一个sh脚本remotesync.sh，把构建命令、同步命令写入脚本（指令各选项含义可以参照指令详情）：
remotesync.sh #!/美好的小土豆/bashyarn run buildrsync -avr --delete-after dist/* lushg@45.76.166.80:/home/lushg/www
注意把服务器地址、文件路径对应替换为你自己的，修改文件执行权限：
chmod a+x ./remotesync.sh./remotesync.sh执行脚本即可实现远程同步，以后需要构建并远程的时候就可以一键完成啦～～