前言
在前后端还没有分离的时代下，前端项目通常时放在后端项目的静态资源目录下一起部署的，那个时候并没有专门的前端程序员，或者也可以说前端程序员不需要自己部署网站。通常前端人员只需要把网站源文件如.html文件结尾的资源包发给后端或者运维即可，剩下的事便交给后端或运维搞定了。
但是前后端分离开发后，前后端项目也通常分离部署了，这个时候可能就需要前端人员自己部署前端项目，然后前端人员可能很少接触到服务器等知识，所以部署网站时总是捉襟见肘。
这边文章主要就是讲解如何将一个前端项目部署到服务器，并且外网可以访问，前端项目就以Vue项目为例。
1.准备工作
- 完整的Vue项目
- 一台服务器
准备工作很简单，只需要一个项目和一台服务器即可，项目甚至可以只是一个html文件。
2.初始化Vue项目
使用Vue-cli脚手架初始化一个最基本的Vue项目，命令如下：
vue create myproject
我们初始化一个Vue2.0的项目，选好配置后一路回车：
运行命令：
npm run serve
项目运行成功：
3.服务器安装Nginx
Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用，我们的网站部署到Nginx服务器上。当然也可以选择其它web服务器，这里我们就使用主流的Nginx。
我这里的服务器是Centos系统，故已Centos为例。
（1）先查看服务器是否有nginx
命令如下：
whereis nginx
如果出现如下界面，则代表未安装nginx，否则可跳过本节。
（2）安装nginx
命令如下：
yum install -y nginx
如果未配置yum源的，可参考网上如何使用yum安装nginx，出现如下界面则代表安装完成。
（3）查看nginx安装目录
命令如下：
whereis nginx
或者使用命令查看nginx版本号，出现版本号也代表安装成功。
输入命令：
nginx -v
如果不能全局使用nginx指令，那么可能是环境变量没有配置，具体配置方法可参考网上，这里不做过多解释。
4.启动nginx
（1）启动
服务器安装号nginx后，我们尝试启动它、
命令如下：
nginx
直接输入nginx即可启动服务，打开浏览器，访问服务器地址，出现如下界面则代表启动成功。
这里访问默认的是80端口，因为nginx服务就是默认的80端口，如果不能访问，大致有几种原因：
- nginx未启动
- 服务器安全组未加入80端口
- nginx配置错误
（2）停止
停止nginx服务，命令如下：
nginx -s stop
此时访问浏览器则无法访问：
（3）重启
重启nginx服务，一般用于修改配置文件之后，命令如下：
nginx -s reload
5.修改nginx配置
找到nginx配置文件存放位置，命令如下：
whereis nginx
此时/etc/nginx则是nginx配置文件存放位置，进入该文件夹：
nginx.conf则是默认配置文件，编辑该文件：
上面界面我们基本上不用改什么，重要的是server这个对象，可以看到默认监听的是80端口，所以我们直接访问服务器ip即可，接下来我们改为9000端口：
重启nginx，命令如下：
nginx -s reload
此时访问时则需要带上端口号（需要服务器安全组开启9000端口），访问地址：http://ip:9000：
我们还需要注意的一个地方就是root字段，该字段后面跟着的就是网站页面路径，也就是网站存放的路径。
假设我们网站的存放路径为：
/home/www/dist
修改root，结果如下：
这个时候重启nginx，我们的网站无法访问了，因为我们没有这个文件夹。
6.新建网站文件夹
刚刚我们设置了网站存放的文件夹路径为：
/home/www/dist
此时我们需要在服务器上新建www文件夹：
cd /home
mkdir www
我们没有新建dist文件夹，因为我们待会儿vue项目打包就会生成dist文件夹。
7.打包部署vue项目
（1）打包网站
使用vue打包命令,生成dist文件夹：
npm run build
（2）上传至服务器
我们可以使用ftp工具将dist文件夹上传至/home/www目录下，当然也可以使用命令：
scp -r dist/ root@139.9.219.136:/home/www
在我们的项目目录下用打开git命令行，将本地的dist整个文件夹复制到服务器，需要主要的时scp命令window不支持，所以使用了git命令行工具。
此时无需重启nginx，刷新浏览器，可以看到我们的网站已经部署成功了。
8.解决刷新路由404问题
当我们切换路由后，然后在刷新页面，会出现404的情况。
这是因为我们vue项目采用了history的路由方式，至于原因主要是vue是单页面应用，细节部分大家可自行下来了解。
解决问题的办法：
（1）将路由模式改为hash
（2）修改nginx配置：
location / {
try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}
修改之后重启nginx，这个时候刷新浏览器则不会出现404了。
总结
网站部署其实很简单，主要是需要了解nginx知识，懂了基本原理之后，部署任何网站都不会有问题的。
小编开源网站：小猪导航
