网上将项目部署到服务器的参考很多，这里只介绍简单部署的方式。

---

目录

一、准备工作

二、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部署

1、打包vue项目

将vue项目打包成dist文件夹，在package.json文件中，点击build进行打包

 2、将dist文件夹拷贝到Nginx的安装目录下

找到Nginx的安装目录下的 html目录

 将dist文件夹放到这个目录下

 3、配置Nginx

进入上面的conf 目录下，打开 nginx.conf文件

目前先修改两处地方，因为vue项目和springboot项目是分开部署到服务器上的，所以后面vue访问后端还需要做一定的调整。

(1)  修改服务器ip地址和端口号

 因为现在是把vue前端交给了Nginx代理，所以这里的端口号不一定是我们在vue项目中设置的端口号。这里的端口号必须是当前服务器开放的端口号。

(2) 修改打开的.html文件地址

 Nginx在开始运行以后，运行的就是root对应的路径下的 index.html文件，我们要让Nginx运行我们dist文件夹中的index.html文件。

4、启动Nginx

先打开Nginx安装路径下的命令行

输入start nginx，就可以启动Nginx了，要查看是否启动成功，可以进入logs目录下，如果有nginx.pid，说明启动成功。这里的error.log 记录着网页出现问题时的错误信息。

输入 nginx -s stop，就可以停止Nginx了，更多指令可以自行百度。

 注意：不建议使用IE浏览器打开，可能会出现404 Not Found

5、在浏览器中打开网页

在浏览器地址栏输入Nginx中修改的ip地址和端口，如果可以显现界面就说明启动正常。

6、问题：输入ip和端口号以后，网站是空白页？？

我在部署的过程中曾经遇到这样的问题，打开以后，网站是空白的，也没有什么404 Not Found，我们项目是vue3.0的，所以我在vue.config.js中加了这么一些内容

三、后端部署

1、在服务器的某个盘中新建一个文件夹demo

2、下载WinSW

下载路径： Releases · winsw/winsw · GitHub

打开网址以后，向下滑，可以找到下面的内容，并下载 WinSW.NET4.exe，将下载好的WinSW.NET4.exe拷贝到上面创建好的demo文件夹中，并将 .exe文件的名字重命名为你的项目名。

3、package打包springboot项目

在打包之前，你需要将你项目中application.properties或者application.yml的 mysql 登录密码改为服务器中mysql的登录密码。然后再打包。

这里打包后端采用的是较为直接的方式。打包完成后，我们可以在target文件夹下找到 jar包， 将这个jar包拷贝到demo文件夹中。

4、新建一个.xml文件，文件名为项目名

将下面的内容拷贝到这个 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>

 5、安装服务

打开当前目录下的命令行，输入  xxx.exe install

 继续输入 net start

安装成功以后，打开任务管理器，选择“服务”，找到和你项目名同名的服务，启动该服务，到此你的后端就已经开始运行了。

6、测试

我们可以使用postman来测试是否可以访问到后端，先让上面的服务启动，打开postman，输入后端的请求地址，如果能正常获取到后端返回的内容说明后端无异常。

 四、建立前端和后端的连接

因为前端和后端是分开部署到服务器上的，为了让后端可以接收到前端的请求，我们需要搭建起前端和后端的连接。关于这个，我也弄了很久，因为我的跨域处理是放在前端的vue.config,js中的，看网上说，vue部署到服务器以后，跨域处理会失效，所以跨域处理要放在 Nginx中，到现在我也搞不清楚是为什么。

我在vue里的设置如下

vue里我不做修改，我主要是在nginx.conf中添加代理内容，添加的内容如下，9090是我的后端端口号。

 五、问题：刷新页面以后，页面404

我的做法是加上下面两部分内容

 六、问题：项目里用到webSocket，前端一直报错

部署到服务器上以后，因为项目中用到了webSocket，不知为什么，一直在报错。

网上了解了一下，这里的localhost要改成服务端的ip地址，在代码中是这样。

 如果还会报下面这样的错误，那就试着把防火墙关了