相信很多刚学习vue的朋友都可以进行到将vue项目进行npm run build这部，对于将build后的结果部署到nginx服务器上却一知半解，作者单纯的绿草也是很迷惑，看到网上很多朋友在问，今天作者就将自己的部署过程记录下来，供大家参考。
首先将开发完成的vue项目打包 // 在终端中cd到项目目录下cd /usr/local/project// 进行项目构建（可在本地构建）npm run build// build后会在目录下多了一个dist文件夹dist中包含： index.html 和 static文件夹// vue部分准备工作完成 服务器安装nginx // 作者是Ubuntu的服务器sudo apt-get nginx// 等待nginx安装完成 接下来首先将vue build后的dist下的两部分放到服务器上 cd /var/www/htmlmkdir project// 将dist下的两部分（index.html和static）放到project下 接下来进入到nginx配置了 // 找到nginx.conf文件cd /etc/nginx// 打开nginx.confvim nginx.conf
可以看到，作者在图中红色标出部分，提示大家nginx端口的真实配置其实在红色指出部分
// cd至 sites-enabledcd sites-enabled// 查看下面是否有defaultvim default
可以看到，该处确实是nginx的真实配置
// 将下面的代码添加到上面所示的后面location /project { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. alias /var/www/html/project; index index.html index.htm; 一分快三技巧// 在终端中cd到项目目录下cd /usr/local/project// 进行项目构建（可在本地构建）npm run build// build后会在目录下多了一个dist文件夹dist中包含： index.html 和 static文件夹// vue部分准备工作完成 服务器安装nginx // 作者是Ubuntu的服务器sudo apt-get nginx// 等待nginx安装完成 接下来首先将vue build后的dist下的两部分放到服务器上 cd /var/www/htmlmkdir project// 将dist下的两部分（index.html和static）放到project下 接下来进入到nginx配置了 // 找到nginx.conf文件cd /etc/nginx// 打开nginx.confvim nginx.conf
可以看到，作者在图中红色标出部分，提示大家nginx端口的真实配置其实在红色指出部分
// cd至 sites-enabledcd sites-enabled// 查看下面是否有defaultvim default
可以看到，该处确实是nginx的真实配置
// 将下面的代码添加到上面所示的后面location /project { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. alias /var/www/html/project; index index.html index.htm; try_files $uri $uri/ =404; }// 退出重启nginxservice nginx reload// ps查看是否重启了nginxps -ef |grep nginx
接下来通过浏览器访问“http://xxx.xxx.xx.xxx(该处为你的服务器ip)/project”就可以看到你的vue项目啦，作者的项目已经部署成功啦，github上的项目地址是https://github.com/guodonglw/vue_admin，希望能够帮助到大家
注：如果是阿里云或其他机构的服务器，需先在安全组中配置80端口对外开放