SpringBoot+Vue项目的打包部署教程
本教程旨在帮助开发者，完成基于springboot后端项目和基于vue前端项目的打包以及服务器部署。本教程的条件是开发者已经拥有一个完备的springboot+vue的前后端分离的项目，以及一台配置好JDK和MySQL以及nginx的环境的云服务器。目的是可以或许将项目部署到云服务器上，并通过云服务器的IP访问项目。一.Vue前端项目打包
在VSCode中打开前端项目的文件夹，编辑vue.config.js配置文件,添加以下代码块：
module.exports = {
publicPath: "/",
assetsDir: "static",
outputDir: 'dist',
} 如图所示：
https://i-blog.csdnimg.cn/direct/8fe4e2566a9447ea94df8aba3d7c16c4.png
注：publicPath的设置会影响到应用在部署环境中的运行情况，特别是在处理动态路由时可能会出现标题。如果你设置 publicPath 为 ./，它会被表明为当前路径，这在大多数情况下是没有标题的，但在某些服务器配置如（Nginx）中，可能会导致路由解析错误，尤其是对于动态路由的情况。所以本教程中的pulicPath设置为''/''。
然后将request.js中的baseURL的localhost设置为服务器的IP，以便保证后续项目部署前后端的对接。否则后续部署到服务器上可能会出现：前后端对接不上，前端页面无数据显示的情况。
https://i-blog.csdnimg.cn/direct/ecdbb8553cc84ce281af46448438c66d.png
打开终端（注意：这里必要新建一个终端窗口，而不是在当前的窗口，否则之前所做的更改均无效），输入npm run build命令执行打包，打包结束后当前目次会出现一个dist文件夹，即为打包后的前端项目。
https://i-blog.csdnimg.cn/direct/930c0b4d2f854818a57395104873533d.png
二.SpringBoot后端项目打包
用IDEA打开后端项目，编辑application.yaml或者application.properties配置文件，将数据库毗连的IP由localhost改为服务器的数据库IP。(条件：服务器上有对应的数据库环境和对应项目的数据库，并且关闭了防火墙，可以或许在本地访问)
https://i-blog.csdnimg.cn/direct/4d73c469360b4f3e8eff7a79ab4a2bb8.png
打开后端项目的跨域配置文件，将localhost改为服务器的IP，以便项目部署到服务器后，允许前端项目8080端口可以或许向后端项目的8081端口发送数据哀求。（本教程前端项目占用8080端口,后端项目占用8081端口）
https://i-blog.csdnimg.cn/direct/e81255ee6a16409abe4bd9731724d8b3.png
如果项目中有单元测试的代码，记得注释掉，否则可能会打包失败。
https://i-blog.csdnimg.cn/direct/7479389982494bf1ad108c7ce2e96ab9.png
完成了以上配置，即可执行打包（ 如果要重新打包，建议在每次打包前，先输入mvn clean 打扫已有的打包文件）。在IDEA中新开一个终端窗口，输入命令：
mvn package 打包成功后，项目目次中会新增一个target文件夹，此中.jar末端的文件即为打包成功后的项目包。
https://i-blog.csdnimg.cn/direct/933a3f36d64f420997df6fd1b32ca112.png
进入target目次，输入命令:
java -jar yuedong-0.0.1-SNAPSHOT.jar 即可启动项目。
https://i-blog.csdnimg.cn/direct/1aeeb372390c44769b98b18c010e2e5c.png
三.项目部署
前后端项目打包完成后，现在必要将项目部署到云服务器上。起首打开WinSCP，毗连云服务器。将前端项目打包的dist文件夹和后端项目打包后的yuedong-0.0.1-SNAPSHOT.jar包上传到服务器上对应的目次中（本教程事先在服务器的/opt目次中新建了名为yuedong的项目文件夹，里面的front和backend目次下分别存放前后端的打包文件）。
https://i-blog.csdnimg.cn/direct/4f4a0618675b435d96f82316ad8b07f8.png
https://i-blog.csdnimg.cn/direct/99ef2b6078324ecaa33dd6107a06b54e.png
打开Xshell，毗连上云服务器，输入命令：
vim /etc/nginx/nginx.conf 编辑nginx.conf配置文件（这里必要起首在服务器上安装nginx，如果未安装，请先输入命令：sudo apt install nginx或者sudo yum install nginx，根据自己的服务器的操作系统去安装），配置如下(本教程的nginx配置可能比较简单，更复杂专业的配置，读者可查阅nginx的教程文档或者其他博客，本教程寻求最简单可行的配置方式)：
events {}
http {
server {
listen 8080;
server_name localhost;
root /opt/yuedong/front/dist;
index index.html ;
location / {
root /opt/yuedong/front/dist;
try_files $uri $uri/ /index.html;
expires 30d;
}
}
} 读者根据自己的项目端口，和dist文件夹目次自行更改以上配置。编辑完后输入 :wq生存退出，然后输入以下命令重启nginx服务(本教程中，服务器的nginx是已经开启了的，如果首次启动请输入：sudo systemctl start nginx)：
nginx -s reload
配置成功后，现在打开浏览器，输入服务器的公网IP以及端口（本教程是8080）,可以看到项目的前端页面。现在部署成功了一半，由于是前后端分离，前端只有静态的页面，并没有数据。接下来得在服务器中启动我们刚刚上传的后端项目jar包，开启后端服务。
https://i-blog.csdnimg.cn/direct/819b0b9475374ec3a64d84d77ae7a845.png
打开Xshell，进入到存放后端jar包的目次下，输入以下命令开启后端服务：
nohup java -jar yuedong-0.0.1-SNAPSHOT.jar & https://i-blog.csdnimg.cn/direct/a38c345293af435196aeb756af1eb513.png
注：java -jar yuedong-0.0.1-SNAPSHOT.jar这条命令也会启动 Java 应用步伐，但它会在当前终端窗口占用并显示输出。如果你关闭终端或者按下 Ctrl+C 终止命令，Java 步伐也会随之停止。nohup java -jar yuedong-0.0.1-SNAPSHOT.jar &：nohup 命令用于忽略信号，允许步伐在后台继续运行。& 符号将该命令放到后台执行，不阻塞当前终端。这样做可以让 Java 步伐在后台持续运行，纵然你关闭了终端窗口或退出了登录会话。
开启后端服务后，再次刷新浏览器的页面，可以看到前端页面有数据出现了。
https://i-blog.csdnimg.cn/direct/550b76ed2528485a847b1a990120e574.png
至此，项目打包部署完成！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]