网上将项目部署到服务器的参考很多，这里只介绍简单部署的方式。
目录
一、准备工作
二、vue部署
1、打包vue项目
2、将dist文件夹拷贝到Nginx的安装目录下
3、配置Nginx
(1) 修改服务器ip地址和端口号
(2) 修改打开的.html文件地址
4、启动Nginx
5、在浏览器中打开网页
6、问题：输入ip和端口号以后，网站是空白页？？
三、后端部署
1、在服务器的某个盘中新建一个文件夹demo
2、下载WinSW
3、package打包springboot项目
4、新建一个.xml文件，文件名为项目名
5、安装服务
6、测试
四、建立前端和后端的连接
五、问题：刷新页面以后，页面404
六、问题：项目里用到webSocket，前端一直报错
为了能在服务器上正常运行前端和后端，需要在服务器上下载以下内容
(1) 安装Nginx —— 用于部署vue（nginx: download）
(2) 安装mysql —— 数据库
(3) 下载WinSW —— 用于部署springboot项目（Releases · winsw/winsw · GitHub）
(4) 安装jdk —— 让后端项目在服务器上独立运行的关键（记下安装路径）
将vue项目打包成dist文件夹，在package.json文件中，点击build进行打包
找到Nginx的安装目录下的 html目录
将dist文件夹放到这个目录下
进入上面的conf 目录下，打开 nginx.conf文件
目前先修改两处地方，因为vue项目和springboot项目是分开部署到服务器上的，所以后面vue访问后端还需要做一定的调整。
因为现在是把vue前端交给了Nginx代理，所以这里的端口号不一定是我们在vue项目中设置的端口号。这里的端口号必须是当前服务器开放的端口号。
Nginx在开始运行以后，运行的就是root对应的路径下的 index.html文件，我们要让Nginx运行我们dist文件夹中的index.html文件。
先打开Nginx安装路径下的命令行
输入start nginx，就可以启动Nginx了，要查看是否启动成功，可以进入logs目录下，如果有nginx.pid，说明启动成功。这里的error.log 记录着网页出现问题时的错误信息。
输入 nginx -s stop，就可以停止Nginx了，更多指令可以自行百度。
注意：不建议使用IE浏览器打开，可能会出现404 Not Found
在浏览器地址栏输入Nginx中修改的ip地址和端口，如果可以显现界面就说明启动正常。
我在部署的过程中曾经遇到这样的问题，打开以后，网站是空白的，也没有什么404 Not Found，我们项目是vue3.0的，所以我在vue.config.js中加了这么一些内容
下载路径： Releases · winsw/winsw · GitHub
打开网址以后，向下滑，可以找到下面的内容，并下载 WinSW.NET4.exe，将下载好的WinSW.NET4.exe拷贝到上面创建好的demo文件夹中，并将 .exe文件的名字重命名为你的项目名。
在打包之前，你需要将你项目中application.properties或者application.yml的 mysql 登录密码改为服务器中mysql的登录密码。然后再打包。
这里打包后端采用的是较为直接的方式。打包完成后，我们可以在target文件夹下找到 jar包， 将这个jar包拷贝到demo文件夹中。
将下面的内容拷贝到这个 xml文件中，当然，需要稍加修改
<configuration>
<!-- ID of the service. It should be unique accross the Windows system-->
<id>faultDetectionService</id>
<!-- Display name of the service -->
<name>faultDetectionService</name>
<!-- Service description -->
<description>This service is a service cratead from a minimal configuration</description>
<!-- Path to the executable, which should be started -->
<executable>C:\Program Files\Java\jre1.8.0_202\bin\java.exe</executable>
<arguments>-jar demo-0.0.1-SNAPSHOT.jar</arguments>
</configuration>
打开当前目录下的命令行，输入 xxx.exe install
继续输入 net start
安装成功以后，打开任务管理器，选择“服务”，找到和你项目名同名的服务，启动该服务，到此你的后端就已经开始运行了。
我们可以使用postman来测试是否可以访问到后端，先让上面的服务启动，打开postman，输入后端的请求地址，如果能正常获取到后端返回的内容说明后端无异常。
因为前端和后端是分开部署到服务器上的，为了让后端可以接收到前端的请求，我们需要搭建起前端和后端的连接。关于这个，我也弄了很久，因为我的跨域处理是放在前端的vue.config,js中的，看网上说，vue部署到服务器以后，跨域处理会失效，所以跨域处理要放在 Nginx中，到现在我也搞不清楚是为什么。
我在vue里的设置如下
vue里我不做修改，我主要是在nginx.conf中添加代理内容，添加的内容如下，9090是我的后端端口号。
我的做法是加上下面两部分内容
部署到服务器上以后，因为项目中用到了webSocket，不知为什么，一直在报错。
网上了解了一下，这里的localhost要改成服务端的ip地址，在代码中是这样。
如果还会报下面这样的错误，那就试着把防火墙关了
