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.rhkb.cn/news/329632.html

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

相关文章

【施磊】C++语言基础提高:深入学习C++语言先要练好的内功

课程总目录 文章目录 一、进程的虚拟地址空间内存划分和布局二、函数的调用堆栈详细过程三、程序编译链接原理1. 编译过程2. 链接过程 一、进程的虚拟地址空间内存划分和布局 任何的编程语言 → \to → 产生两种东西&#xff1a;指令和数据 编译链接完成之后会产生一个可执行…

python将程序运行结果存入txt文本

//其实就是运行下面代码&#xff0c;然后下面代码会通过subprocess再去运行script.py&#xff08;我们的程序代码&#xff09;&#xff0c;然后把它写入oput.txt中。 import subprocess with open(oput.txt, w) as f:subprocess.run([python, script.py], stdoutf, stderrsu…

XX数字中台技术栈及能力

XX数字中台技术栈及能力 1 概述 XX数字中台面向数据开发者、数据管理者和数据应用者&#xff0c;提供数据汇聚、融合、治理、开发、挖掘、共享、可视化、智能化等能力&#xff0c;实现数据端到端的全生命周期管理&#xff0c;以共筑数字基础底座&#xff0c;共享数据服务能力…

酷开系统 | 酷开科技把握智慧先机 AI赋能家庭场景

智慧化是当今世界科技发展的前沿领域之一。现在的智慧化&#xff0c;也正在逐步成为我们日常生活的一部分。电视系统也进入了数字化时代&#xff0c;AI的应用正在不断扩展&#xff0c;其潜力似乎无穷无尽。 酷开科技深耕人工智能技术&#xff0c;在提升语音体验、强化智能家居…

目前流行的前端框架有哪些?

目前流行的前端框架有很多&#xff0c;它们可以帮助开发者快速构建高质量的前端应用程序。本文将介绍一些目前比较受欢迎的前端框架&#xff0c;并分析它们的优缺点。 React React 是一个由 Facebook 开发的开源前端JavaScript库&#xff0c;用于构建用户界面&#xff0c;尤其…

在vue中实现下载文件功能

实际操作为&#xff0c;在表格中 我们可以获取到文件的id&#xff0c;通过插槽就可以实现 <template #default"scope"><el-button type"text" click"handleDown(scope.row)"><span>下载</span></el-button> </…

计算机毕业设计 | springboot+vue汽车修理管理系统 汽修厂系统(附源码)

1&#xff0c;项目背景 在如今这个信息时代&#xff0c;“汽车维修管理系统” 这种维修方式已经为越来越多的人所接受。在这种背景之下&#xff0c;一个安全稳定并且强大的网络预约平台不可或缺&#xff0c;在这种成熟的市场需求的推动下&#xff0c;在先进的信息技术的支持下…

网络协议——Modbus-TCP

目录 1、简介 2、Modbus-TCP与Modbus-RTU的区别 3、消息格式 4、功能码01H 5、功能码02H 6、功能码03H 7、功能码04H 8、功能码05H 9、功能码06H 10、功能码0FH 11、功能码10H 1、简介 Modbus-TCP&#xff08;Modbus Transmission Control Protocol&#xff09;是一…

嵌入式学习——3——TCP-UDP 数据交互,握手,挥手

1、更新源 cd /etc/apt/ sudo cp sources.list sources.list.save 将原镜像备份 sudo vim sources.list 将原镜像修改成阿里源/清华源&#xff0c;如所述 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main …

【qt】QListWidget 组件

QListWidget 组件 一.QListWidget的用途二.界面设计三.QListWidget的添加1.界面添加2.代码添加 四.列表项的设置1.文本2.图标3.复选框4.列表大小 五.字体和图标的设置1.字体&#xff1a;2.图标&#xff1a; 六.设置显示模式1.图标2.列表 七.其他功能实现1.删除2.全选3.反选4.ad…

小微企业管理系统如何选择等保服务?

小微企业在选择等保&#xff08;信息安全等级保护&#xff09;服务时&#xff0c;应当考虑以下几个关键点以确保既能符合法规要求&#xff0c;又能在成本效益上做出合理决策&#xff1a; 了解等保需求&#xff1a;首先&#xff0c;小微企业需要了解自身的业务性质和信息系统的重…

30.包名的修改和新建后端模块

权限和第三方登录确实令人头疼,我们来学一点简单一点的。 另外,如果各位有属于自己的域名和ICP/IP备案,布置一个作业,自行实现第三方QQ登录。 我们所说的包名修改,是一次性修改ruoyi的全部包名,因为发现很多人有这样的需求,下载别人的代码,想要改成自己公司的包名,结…

深入Django项目实战与最佳实践

title: 深入Django项目实战与最佳实践 date: 2024/5/19 21:41:38 updated: 2024/5/19 21:41:38 categories: 后端开发 tags: Django 基础项目实战最佳实践数据库配置静态文件部署高级特性 第一章&#xff1a;Django项目架构与设计原则 Django框架概述 Django是一个高级的P…

上位机图像处理和嵌入式模块部署(mcu的按键输入)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 做技术的同学&#xff0c;大部分都会把精力放在技术本身&#xff0c;却忽视了学的东西有什么实际的用途。就拿gpio来说&#xff0c;一般我们点灯也…

递归的例子

例1&#xff1a;阶乘函数 #include<iostream> using namespace std; int f(int n) {if(n0)return 1;elsereturn f(n-1)*n; } int main() {int n;cin>>n;cout<<f(n);return 0; }例2&#xff1a;Fibonacci数列 无穷数列1&#xff0c;1&#xff0c;2&#xff0…

计算机-编程相关

在 Linux 中、一切都是文件、硬件设备是文件、管道是文件、网络套接字也是文件。 for https://juejin.cn/post/6844904103437582344 fork 进程的一些问题 fork 函数比较特殊、一次调用会返回两次。在父进程和子进程都会返回。 每个进程在内核中都是一个 taskstruct 结构、for…

Python函数进阶:四大高阶函数、匿名函数、枚举、拉链与递归详解

系列文章目录 Python数据类型&#xff1a;编程新手的必修课深入探索Python字符串&#xff1a;技巧、方法与实战Python 函数基础详解Python正则表达式详解&#xff1a;掌握文本匹配的魔法Python文件操作宝典&#xff1a;一步步教你玩转文件读写Python面向对象基础与魔法方法详解…

实验五:实现循环双链表各种基本运算的算法

实验五&#xff1a;实现循环双链表各种基本运算的算法 一、实验目的与要求 目的:领会循环双链表存储结构和掌握循环双链表中各种基本运算算法设计。 内容:编写一个程序cdinklist.cpp,实现循环双链表的各种基本运算和整体建表算法(假设循环双链表的元素类型ElemType为char),并…

【加密与解密(第四版)】第十七章笔记

第十七章 软件保护技术 17.1 防范算法求逆 17.2 抵御静态分析 反汇编算法&#xff1a;线性扫描&#xff08;无法正确地将代码和数据分开&#xff09;、递归进行 巧妙构造代码和数据&#xff0c;在指令流中插入很多“数据垃圾"&#xff0c;干扰反汇编软件的判断&#xf…

百度手机号登录iApp源码V3

本源码直接对接百度网页版登录接口&#xff0c;无需跳转第三方APP或者网页&#xff0c;可直接进行输入手机号获取验证码的步骤&#xff0c;登录后可获取到用户的UID&#xff0c;名称&#xff0c;BDUSS&#xff0c;PTOKEN&#xff0c;STOKEN&#xff0c;头像直链。 源码下载&…