手把手教你部署前端项目
1.1 用Vue-cli构建简易前端项目
1.1.1 安装 Vue CLI 包
打开命令行工具，执行下列命令来安装 Vue CLI 包：
npm install -g @vue/cli
可以用下面的命令查看是否安装成功：
vue --version
1.1.2 创建一个项目
新建一个文件夹，命名为simple-website，在simple-website下运行以下命令来创建项目：
vue create frontend
全部选择默认配置即可，
这个过程可能需要几分钟，请耐心等待。
1.1.3 打包项目
在simple-website/frontend目录下执行：
npm run build
1.2 登录服务器，把打包后的文件放入对应目录
如果没有购买服务器，可以把自己电脑当做服务器，可跳过该小节。
如果有购买服务器的话，登录服务器：
ssh -l root xxx.xx.xx.xxx
切换到服务器的home目录下，并新建文件夹simeple-website-frontend：
cd /home
mkdir simple-website-frontend
在本地的simple-website/frontend/dist目录下执行如下命令，把打包生成的文件放入服务器对应目录下：
scp -r ./* root@120.76.53.100:/home/simple-website-frontend
1.3 服务器端nginx的安装、配置、启动
1.3.1 nginx安装
在服务器端执行：
sudo su root
apt-get install nginx
查看nginx是否安装成功:
nginx -v
如果安装过程中报错Unable to locate package nginx，先执行sudo apt-get update，再执行sudo apt-get install nginx。
1.3.2 修改nginx配置文件
nginx安装成功后的位置如下:
/usr/sbin/nginx：主程序
/etc/nginx：配置文件所在路径
/usr/share/nginx：静态文件所在路径
/var/log/nginx：日志文件所在路径
修改配置文件/etc/nginx/nginx.conf的部分内容，在http中增加server如下：
http {
server {
listen 8080;
server_name localhost;
location / {
root /home/simple-website-frontend;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
注意：如果是自己电脑作为服务器，root改为前端npm run build后生成的dist文件夹。
1.3.3 nginx服务启动
nginx -t // 检验配置是否正确
nginx -s reload // 重新加载修改的配置
service nginx restart // 重新启动
之后，访问http://xxx.xxx.xxx.xxx:8080/，成功啦。
