利用nginx访问云服务器上的vue项目

由于疫情，这几个月宅在家中，终于把毕设写完了，毕业答辩也完事了，闲来无事，打算将此项目放到云服务器上供大家使用或参考借鉴。
今天先记录一下利用nginx访问云服务器上的vue项目。 在此之前，在网上查找了一些资料，其实还可以通过Apache、xampp访问。

1.安装nginx

    首先，我是直接在云服务器上下载nginx，官网链接，根据自己云服务器配置下载相应包，下载下来的zip解压，nginx文件夹中的目录如下

双击nginx.exe，会发现出现窗口，并闪一下就消失，这属于正常现象。
nginx默认端口是80，所以双击之后，可直接在浏览器地址栏中输入 http://localhost:80 ，会显示此界面，如图1，
若界面打不开，应该是端口被占用了，打开conf/nginx.conf，将端口号修改成其他端口号，如图

然后保存后关闭，在命令行中输入 nginx –s reload， 进行nginx重启。重启后在浏览器地址栏中输入 http://localhost:端口号，就能成功进入图1的界面了。

2.操作Vue项目

    将vue项目克隆到云服务器中，中间省略…在 npm run dev 没有问题的情况下，进行打包(npm run build)，打包之后，将dist文件直接复制粘贴到nginx文件夹下的html文件夹中

3.配置nginx.conf

    在nginx文件夹中打开conf/nginx.conf，修改为
重新在命令行输入 nginx –s reload 重启nginx，在浏览器地址栏中输入 http://localhost:端口号，查看是否显示成功。若成功，就说明其他客户端也可进行访问该项目，可在其他电脑或手机输入你的云服务器的公网IP+端口号(例：http://139.9.139.13:8081/)进行测试查看。

参考：
https://blog.****.net/baidu_30809315/article/details/86523546
https://www.jianshu.com/p/7614fa1689ad
https://www.cnblogs.com/jiangwangxiang/p/8481661.html