记录第一次成功将vue项目打包并部署到centos云服务器上并访问(包含多个vue项目部署nginx配置说明)

准备

• vscode：用于打包vue项目(需要提前安装好node与npm，推荐使用mvn管理node，此处分享nvm初探)
• xshell：用于远程连接云服务器
• xftp：用于本地和远程文件传输
• centos7服务器(需要提前安装nginx)

vue项目打包

  想必你要部署vue项目，npm一定安装好了！终端执行npm run build，需要注意的是，必须是vue-cli项目，通过vue init webpack初始化的项目才行，不然没有打包文件，无法打包。打包完成后，会生成一个dist文件，如图

  展开dist文件夹是这样的：

配置服务器

  首先，你得有个服务器😂

  你可以选择在阿里云上租一个云服务器，然后选择centos云服务器，租用成功后，需要配置一下你的云服务器，包括密码、开放端口管理等，后面都会用到的。当简单配置完毕后，你需要安装一下nginx，网上教程很多，这里就不详细描述了。

使用xshell

  现在我们准备好了什么呢？首先是打包完成的dist文件，还有一个安装好nginx的云服务器，那么问题来了，我们应该如何去访问这个云服务器，还有如何将dist文件放到该服务器上呢，这时候，xshell和xftp就派上用场了！
  首先，我们使用xshell与我们的云服务器建立连接，我使用的xshell7,打开后，按照如下步骤连接云服务器：




  到这一步，我们已经成功通过xshell远程连接到我们自己的服务器了，接下来，我们需要考虑如何将vue项目打包生成的dist文件放到服务器上，以便我们能够通过服务器公网ip+配置的端口来访问我们的vue项目。如果你对linux命令非常熟悉的话，你可以直接在xshell上通过相关命令完成部署。但是，对于我这种对命令头大的人来说，这并不是一个好主意😭
  在这里还是介绍一下使用命令传输文件的方法吧，关于通过命令将上传到服务器上，操作如下：

// 安装lrzsz使用rz命令
# yum install lrzsz

// 选择你想要存放的目录位置然后使用rz命令打开文件选择器
# rz // 没错，就是rz

  打开文件选择器后选择想要传输的文件点击确定就开始向服务器传输啦，貌似也挺简单的😂不过在后续的测试使用中，发现这种使用方法有时会传输失败，无法成功传输。为了一步到位，接下来介绍一下使用xftp进行文件传输，这种方式更加方便，且效率更高(可以不用使用命令在各种目录来回切换查找啦)。

使用xftp

  问题还是要解决的！当你在下载安装xshell时，你应该看到了与它捆绑在一起的另一个软件–xftp，它是干什么的呢？它就是为我们这种对命令、文件字符干瞪眼的人设计的，它打开后就会向Windows打开C、D等盘那样将文件展示给你，展示图如下，左边是我们的本地系统，右边是服务器上的文件资源。这时候，我们再想实现将dist文件放到服务器上，我们只需要在本地找到dist文件,然后直接拖拽到右边你想要放置的位置即可，是不是很简单😁

  当我们完成上述步骤之后，我们还需要配置一下nginx.conf文件中的部分参数，这是必须要进行的一步。第一种方法：我们可以使用xshell通过命令vim /etc/nginx/nginx.conf打开这个文件，然后使用vim命令修改对应的参数(如果需要部署多个项目，则在nginx.conf文件中再新建server{},对新项目进行同样配置即可，后续实践证明：下图中的location相关配置也可不要，访问时直接IP+端口号即可访问)，具体如下：

  下图是我第二个项目的nginx配置(大家也可以访问一下😁,下面有程序界面截图😁：浏览器地址栏输入47.103.56.67:8081即可访问)

  这是我第二个项目的运行主页面😂

• listen :监听的端口号(确保端口已开放，可到服务器上的安全组进行端口配置管理，如图所示)
  

• server_name :服务器ip

• root :服务器存放dist文件的路径 （如下图所示）
  
    第二种方法：如果你不想使用vim命令来进行操作的话，我们还可以直接使用xftp找到nginx.conf文件，然后以文本形式打开，修改完毕后保存即可，如下图
  
    这里分享一个配置参考连接CentOS7安装Nginx及配置

  当我们配置完nginx.conf文件后，我们再执行一下systemctl restart nginx重启一下nginx(否则，你永远只会看到nginx欢迎界面😥)，然后我们就可以使用服务器的公网ip+端口号来访问我们的vue项目啦！

当项目更新时操作

  后续如果项目有更新的话，我们只需要重新打包vue项目，再将服务器上的dist文件夹及index.html文件替换掉就可以啦！

小结

  到这里，我们就实现了将一个vue项目打包并部署到服务器然后通过IP地址访问这个vue项目啦！总体流程大致为：
  使用npm命令打包vue项目——将生成的dist文件存放到服务器上(服务器已安装nginx)——配置nginx.conf文件——使用服务器IP+端口访问vue项目(确定端口已开放)

  你学废了吗🐷

  补充：如果内容中有不正确的地方，欢迎大佬们指正，有不明白的地方也可以留言讨论😁