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…

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;。 包含 …

罗德与施瓦茨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软件的崛…

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

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

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

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

Vue3 ts实现将assets中的图片转为file格式,实现本地图片选择上传功能

Vue3 ts实现将assets中的图片转为file格式&#xff0c;实现本地图片选择上传功能 1、需求描述2、关键代码3、img标签src使用变量打包后图片无法展示 1、需求描述 用户可以选项系统固定的几个图标&#xff0c;也可以自定义上传图片。系统固定图标存在 src\assets\images\app 路径…

sql注入——时间盲注

在sql注入的第九关中&#xff0c;我们既看不到返回值&#xff0c;也不能通过布尔盲注得到结果&#xff0c;这个时候还有一种方法就是通过页面反应时间来获取信息&#xff0c;就是时间盲注 第九关的代码&#xff0c;可以看到无论是否正确&#xff0c;页面都会返回You are in 可…

4---git命令详解第一部分

一、提交文件方面命令&#xff1a; 1.1第一步&#xff1a;将需要提交的文件放进暂存区&#xff1a; 添加单个文件到暂存区stage&#xff1a; git add 文件名 添加多个文件到暂存区&#xff1a; git add 文件名1 文件名2 ... 将目录下所有文件添加到暂存区&#xff1a; git…

【漏洞复现】用友U8 CRM uploadfile 文件上传致RCE漏洞

0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP&#xff0c;主要聚焦成长型、创新型企业&#xff0c;提供企业级云ERP整体解决方案。 0x02 漏洞概述 用友 U8 CRM客户关系管理系统 uploadfle.php 文件存在任意文件上传漏洞&#xff0c;未经身份验证的攻击者通过漏洞上传…

SpringBoot 国际化

如下四步 1 建资源文件 2 在yml文件中指定资源文件名称 3 自定义类型转换&#xff0c;转换locale Configuration public class DefaultLocaleResolver implements LocaleResolver {Overridepublic Locale resolveLocale(HttpServletRequest request) {String locrequest.getP…

基于语音识别的智能电子病历(三)之 M*Modal

讨论“基于语音识别的智能电子病历”&#xff0c;就绕不开 Nuance 和 M*Modal。这2个公司长时间的占据第一和第二的位置。下面介绍一下M*Modal。 这是2019年的一个新闻“专业医疗软件提供商3M公司为自己购买了一份圣诞礼物&#xff0c;即M*Modal IP LLC的医疗技术业务&#xf…