vue项目部署到nginx并上传到云服务器中的基本步骤

关于vue项目开发完成后，一般选择部署在Nginx服务器中，相比之下，nginx服务器还是有很多优点的。作为一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。
部署流程如下：
1. 在编译器里面将开发完成的Vue项目进行打包，在终端输入

npm run build

打包完成后的项目文件结构会多一个dist文件夹，里面包含项目的代码及资源。
2.将生成的dist文件夹放入nginx的html文件夹下面，nginx文件目录结构如下
3. 接下来，我们需要修改conf文件夹里面的nginx.conf文件

在nginx.conf文件里面添加如下内容

server {
listen 监听端口（例如：8080，8088，9002等等）;
server_name 服务器的地址或者自己本机地址;
root 存放dist文件夹的硬盘地址（例如：C:\nginx\html\dist；）
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}

添加完成以后在nginx服务器更新一下自己修改的内容，nginx更新命令：

nginx -s reload

到这里，基本上在nginx服务器上部署vue项目就完成了，本机的话在浏览器输入地址加端口号就可以访问成功了。
当然了，如果有云服务器，则是需要稍微一些改动就可以了。这里选择的阿里云服务器（windows系统）来测试，开启云服务器在本机连接远程桌面就可以直接复制文件了，配置文件方面没有改动，这里需要注意的是关于nginx.conf文件里面的监听端口的改动，添加端口以后，需要在云服务器开启相应端口，否则可能导致访问不到或者拒绝访问。登录阿里云管理控制台，在菜单栏左侧点击本实例安全组，实例没有加入安全组选择加入，加入了安全组选择配置规则

加入安全组以后我们点击配置规则，需要哪个端口添加哪个端口或者添加相应的端口范围即可

此时的ngin.conf里面相应的端口就开放了，相应的server_name 填写云服务器的公网IP，到这里，整个项目部署，以及上传到云服务器都可以正常访问了。