vue打包部署到springboot,通过tomcat运行

  • tomcat默认端口 8080
  • springboot端口 9132
  • vue 端口 9131 

框架 

项目是基于SpringBoot+Vue前后端分离的仓库管理系统

  • 后端:SpringBoot + MybatisPlus
  • 前端:Node.js + Vue + element-ui
  • 数据库:mysql

 一. 打包Vue项目

cmd中输入命令 npm run build 后就可打包成功

打包完成后项目路径下会生成一个新的文件夹dist,打包后的东西都在里面

二、整合Vue项目和SpringBoot项目

将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/static目录下

(没有static就新建 一个static文件夹


 然后配置Spring

三、修改Pom文件

 

  • 1. 设置打包为war包(如果不需要可以不设置)

    默认打包成 jar包 

想要打包成war包,需要在pom文件中添加以下这一行

<packaging>war</packaging>

  • 2 . 排除掉 web 里面自带的 Tomcat

  • 只需要在spring-boot-starter-web 这个依赖上添加如下内容: 

<exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId></exclusion>
</exclusions>
  • 3. 添加一个自己的 Tomcat

 添加以下依赖:

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><version>2.7.5</version><scope>provided</scope>
</dependency>

查看spring-boot-starter-tomcat的版本

 进入你的Maven本地仓库目录(默认是~/.m2/repository),然后导航到org/springframework/boot/spring-boot-starter-tomcat目录,该目录下会包含不同版本的文件夹,版本号就包含在这些文件夹名称中。

四、添加配置类 

在SpringBoot同级目录下添加一下配置类ServletInitializer

让其继承一个类:SpringBootServletInitializer,并且覆盖 configure 方法,在方法中添加 return builder.sources(WarehouseSystemApplication.class); 

其中:WarehouseSystemApplication.class是 启动类类名(每个人都不一样)

 

package com.rabbiter;import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;public class ServletInitializer extends SpringBootServletInitializer {public ServletInitializer() {System.out.println("初始化ServletInitializer");}@Overrideprotected SpringApplicationBuilder configure(SpringApplicationBuilder application) {return application.sources(WarehouseSystemApplication.class);}
}

或者重新写一个类 SpringBootStartApplication,和WarehouseSystemApplication平级,

package com.rabbiter;import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
public class SpringBootStartApplication extends SpringBootServletInitializer {@Overrideprotected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {// 注意这里要指向原先用main方法执行的Application启动类return builder.sources(WarehouseSystemApplication.class);}
}

五、设置 configurations

Run -->Edit Configurations

  

 

   

   

六、选择Tomcat运行

   

运行后自动调转网页 

  

 七、跨域问题

存在跨域问题,不处理的话登录时会出现如下问题AxiosError: Network Error 

   

要么设置跨域访问(各种操作后还是不行,后续解决)

要么把tomcat/springboot/vue端口都设置一致,比如都设置为 9131 (完美解决~)

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习之基于YoloV5-Deepsort人物识别与追踪项目

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与目标 本项目旨在利用深度学习技术&#xff0c;结合YoloV5和Deepsort算法&#xff0c;开发一个高效、…

前端:音频可视化(H5+js版本)

一、效果展示 HTML5JS实现一个简单的音频可视化 二、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>音频可视化</title><style></style></head><body><divs…

非平稳信号的傅里叶变换与短时傅里叶变换

一、仿真一个非平稳的时间序列。 N 10000; t 0:N-1; z1 4.2*sin(2*pi/20.*t5); z2 2.2*sin(2*pi/100.*(10.001*t).*t8); w1 randn(length(t),1); yz1z2w1; figure;plot(y,LineWidth,1.5);grid on; ylabel(Signal); xlabel(Time); 二、傅里叶变换&#xff08;FFT&#xff…

教育智能化的历史及发展趋势

1. 教育智能化概述 1.1 定义与背景 教育智能化是指利用人工智能、大数据、云计算等现代信息技术&#xff0c;对教育过程进行智能化改造&#xff0c;提升教育质量与效率。随着技术进步&#xff0c;教育智能化已成为全球教育改革的重要趋势。 教育智能化的背景可以追溯到20世纪…

Llama 3超级课堂作业笔记

文章目录 基础作业完成 Llama 3 Web Demo 部署环境配置下载模型Web Demo 部署对话截图 使用 XTuner 完成小助手认知微调Web Demo 部署自我认知训练数据集准备训练模型推理验证 使用 LMDeploy 成功部署 Llama 3 模型环境&#xff0c;模型准备LMDeploy CLI chatLMDeploy模型量化(…

SQL Server 2022安装+SQL Server最新补丁+smss工具连接超详细教程

文章目录 一、SQL Server 2022安装二、SSMS的安装与连接三、最新补丁下载总结 一、SQL Server 2022安装 官网下载安装包&#xff1a;https://www.microsoft.com/en-us/sql-server/sql-server-downloads 打开 选择自定义 更改你要安装到的位置后进行安装 安装程序包下载完后会自…

将本地项目代码上传到别人GitHub的远程分支上流程记录

首先将别人的项目克隆到本地&#xff1a; git clone 项目地址 然后cd进项目中&#xff0c;查看分支名称&#xff1a; git branch git branch -a 切换分支&#xff1a; git checkout 远程分支名 &#xff08;必须与所要提交代码的远程分支同名&#xff09; 截图案例&#xff1…

简单的TCP网络程序:英译汉服务器

一、服务器的初始化 下面介绍程序中用到的socket API,这些函数都在sys/socket.h中。 1.创建套接字 socket()&#xff1a; ⭐参数介绍&#xff1a; socket()打开一个网络通讯端口,如果成功的话,就像open()一样返回一个文件描述符;应用程序可以像读写文件一样用read/write在网…

AI大模型日报#0523:中国大模型价格战的真相、大模型「上车」、王小川首款 AI 应用

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE 4.0&#xff09;、“零一万物”&#xff08;Yi-Large&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅读&#xf…

04. Redis 配置文件

文章目录 单位包含网络 NETWORK通用 GENERAL快照 SNAPSHOTTING主从复制 REPLICATION安全 SECURITY客户端 CLIENTS内存设置 MEMORY MANAGEMENTAPPEND ONLY MODE 模式&#xff08;aof 的配置&#xff09; 单位 配置文件对大小写不敏感&#xff08;unit单位&#xff09;。 包含 …

Flutter 中的 WillPopScope 小部件:全面指南

Flutter 中的 WillPopScope 小部件&#xff1a;全面指南 在 Flutter 应用开发中&#xff0c;WillPopScope 是一个非常有用的小部件&#xff0c;它允许开发者拦截和处理用户尝试退出当前页面的操作。这在需要确认用户是否真的想要离开当前页面&#xff0c;或者在离开前需要执行…

京东h5st加密参数分析与批量商品价格爬取(文末含纯算法)

文章目录 1. 写在前面2. 接口分析3. 加密分析4. 算法还原【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python与爬虫领域研究与开发工作! 【🌟作者推…

罗德与施瓦茨ZNB20矢量网络分析仪怎么读取Trace?

矢量网络分析仪(VNA)是电子测量领域广泛应用的重要仪器&#xff0c;可以帮助工程师精确测量各种射频和微波设备的参数&#xff0c;为设计优化、故障诊断等提供关键数据支持。作为业界领先的VNA制造商&#xff0c;罗德与施瓦茨的ZNB20型号在测量精度、动态范围、扫描速度等方面都…

家政预约小程序05服务管理

目录 1 设计数据源2 后台管理3 后端API4 调用API总结 家政预约小程序的核心是展示家政公司提供的各项服务的能力&#xff0c;比如房屋维护修缮&#xff0c;家电维修&#xff0c;育婴&#xff0c;日常保洁等。用户在选择家政服务的时候&#xff0c;价格&#xff0c;评价是影响用…

中国网对话神工坊创始人任虎: 先进计算技术赋能,领跑自主CAE新时代

随着"中国制造2025"收官在即&#xff0c;智能制造和工业互联网的发展势头更劲。作为现代工业的基石&#xff0c;工业软件已成为推动工业数字化转型的关键力量。 近日&#xff0c;神工坊创始人&CEO任虎先生接受了中国网记者的专访&#xff0c;就“国产CAE软件的崛…

C++中的Lambda的定义与使用

文章目录 前言Lambda的定义与使用方式总结 Lambda的使用和细节 前言 在C11引入了Lambda表达式&#xff0c;它是一种方便的匿名函数&#xff0c;可以在需要时临时定义函数&#xff0c;并且可以捕获局部变量。下面是Lambda表达式的定义与使用方式&#xff0c;并对其进行总结 La…

【东山派Vision K510开发板试用笔记】nncase的安装

概述 最近试用了百问网提供的东山派Vision开发板&#xff0c;DongshanPI-Vision开发板是百问网针对AI应用开发设计出来的一个RSIC-V架构的AI开发板&#xff0c;主要用于学习使用嘉楠的K510芯片进行Linux项目开发和嵌入式AI应用开发等用途。DongshanPI-Vision开发板采用嘉楠公司…

持续总结中!2024年面试必问 20 道 Redis面试题(三)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道 Redis面试题&#xff08;二&#xff09;-CSDN博客 五、Redis的持久化机制是什么&#xff1f;各自的优缺点&#xff1f; Redis的持久化机制主要有三种&#xff1a;RDB持久化、AOF持久化以及混合持久化。下面…

Android 13 QSSI和TARGET编译时间不一致导致recovery升级失败

环境 $ cat /etc/os-release NAME"Ubuntu" VERSION"20.04.4 LTS (Focal Fossa)" IDubuntu ID_LIKEdebian PRETTY_NAME"Ubuntu 20.04.4 LTS" VERSION_ID"20.04" HOME_URL"https://www.ubuntu.com/" SUPPORT_URL"https:/…

寡姐不高兴了:这次可能会让 OpenAI 遇到真正的麻烦|TodayAI

寡姐这次真不高兴了 演员斯嘉丽约翰逊&#xff08;Scarlett Johansson&#xff09;近日表示&#xff0c;她拒绝了 OpenAI 的邀请&#xff0c;不愿为对话式 ChatGPT 系统配音&#xff0c;却发现公司仍然使用了一个听起来非常像她的声音。对此&#xff0c;她感到“震惊”和“愤怒…