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

news2024/11/20 9:19:42
  • 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");
    }
    @Override
    protected 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 {
    @Override
    protected 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.coloradmin.cn/o/1683107.html

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

相关文章

Edge浏览器“此页存在问题”解决思路

Edge浏览器显示“此页存在问题”解决思路 大家平时使用Edge浏览器时&#xff0c;是否和我一样会突然出现“此页存在问题”的情况&#xff1f; 经过百度查询后我找了一种情况和解决办法&#xff0c;能够大大减少这类问题的出现。出现“此页存在问题”可能是因为之前使用过软件…

【Andoird开发】android获取蓝牙权限,beacon,android-beacon-library

iBeacon 最先是苹果的技术&#xff0c;使用android-beacon-library包可以在android上开发iBeacon 技术。 iBeacon的发明意义重大。它是一种基于蓝牙低功耗&#xff08;Bluetooth Low Energy, BLE&#xff09;技术的定位系统&#xff0c;通过向周围发送信号来标识其位置。这项技…

测试驱动编程(2)进阶单元测试(上)

文章目录 测试驱动编程(2)进阶单元测试&#xff08;上&#xff09;单元测试单元测试正确打开方式各类测试比较 TDD中的单元测试 测试驱动编程(2)进阶单元测试&#xff08;上&#xff09; 单元测试 要打造出出类拔萃的作品&#xff0c;你必须专注于最小的细节 单元测试正确打…

App玩转oCPX投放,打造低成本高转化的广告模型

随着广告主考核目标逐渐深化&#xff0c;以激活、注册等浅层指标为考核已经无法满足大部分广告主的投放诉求&#xff0c;越来越多的后端深化指标成为了广告主的核心诉求。OCPX应需而生&#xff0c;更好的助力广告主优化投放&#xff0c;全面提升转化效率。 在投放实践中&#…

【OpenGL纹理】纹理贴图基础知识(01/4)

文章目录 一、说明二、贴图的初始化处理2.1 贴图中的几种纹理2.2 原始数据处理 - 贴图的规格化 三、纹理对象生成和绑定&#xff08;选中&#xff09;3.1 生成纹理矩阵3.2 glGenTextures 函数明细3.2 glBindTexture函数明细 四、glTexParameteri函数4.1 贴放放法参数确定4.2 放…

ftp是什么,ftp能做什么,ftp有什么用 -----ftp介绍

大家好&#xff0c;我是风屿&#xff0c;今天开始我会给大家介绍一些关于网络方面的配置以及介绍等等&#xff0c;今天是ftp FTP中文名字叫做文件传输协议&#xff0c;英文名字叫做File Transfer Protocol&#xff08;简称为ftp&#xff09; FTP 是因特网网络上历史最悠久的网…

docker 安装RabbitMQ-web版本

直接拉去web版本 docker pull rabbitmq:management启动命令 设置用户名 admin 密码123456 docker run -dit --name rabbitmq -p 5672:5672 -p 15672:15672 -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASS123456 rabbitmq:management访问地址 http://127.0.0.1:…

数据访问层设计_6.连接对象管理设计

1.数据库连接管理 在基于JDBC的数据库应用开发中&#xff0c;数据库连接的管理是一个难点&#xff0c;因为它是决定该应用性能的一个重要因素。 对于共享资源&#xff0c;有一个很著名的设计模式——资源池。该模式正是为了解决资源频繁分配、释放所造成的问题。把该模式应用到…

反射的基本知识

基本概念 反射是java在运行过程中的自我观察能力&#xff0c;通过class constructor field method 四个方法来获取一个类的各个组成部分。 反射是在运行状态中对于任意一个类&#xff0c;都能知道这个类的所有属性和方法&#xff1b;对于任意一个对象都能调用它的任意一个方法…

软件设计师备考笔记(九):数据库技术基础

文章目录 一、基本概念二、数据模型&#xff08;一&#xff09;基本概念&#xff08;二&#xff09;E-R模型&#xff08;三&#xff09;数据模型 三、关系代数&#xff08;一&#xff09;关系数据库的基本概念&#xff08;二&#xff09;五种基本的关系代数运算&#xff08;三&…

2024 中青杯高校数学建模竞赛(B题)数学建模完整思路+完整代码全解全析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 作为经验丰富的数学建模团队&#xff0c;我们将为你带来2024 长三角高校数学建模竞赛&#xff08;A题&#xff09;的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有详尽的建模过…

sam代码简析

Segment Anything&#xff1a;建立了迄今为止最大的分割数据集&#xff0c;在1100万张图像上有超过1亿个掩码&#xff0c;模型的设计和训练是灵活的&#xff0c;其重要的特点是Zero-shot(零样本迁移性)转移到新的图像分布和任务&#xff0c;一个图像分割新的任务、模型和数据集…

Arthas,应用诊断利器!【送源码】

Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法执行耗时&#xff0c;类加载信…

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

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

基于BERT的医学影像报告语料库构建

大模型时代&#xff0c;任何行业&#xff0c;任何企业的数据治理未来将会以“语料库”的自动化构建为基石。因此这一系列精选的论文还是围绕在语料库的建设以及自动化的构建。 通读该系列的文章&#xff0c;犹如八仙过海&#xff0c;百花齐放。非结构的提取无外乎关注于非结构…

修改 ant design tour 漫游式导航的弹窗边框样式

一 说明 应项目要求&#xff0c;调整ant design tour 弹窗边框的样式。tour 原本样式是有遮罩层&#xff0c;因此没有边框看起来也不突兀。原图如下&#xff1a; 但是UI设计是取消遮罩层&#xff0c;并设置边框样式。当 取消 了遮罩层&#xff0c;没有设置边框样式的图片如下&a…

STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位(三)

STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位&#xff08;三&#xff09; 文章目录 STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位&#xff08;三&#xff09;文档说明&#xff1a;官方参考文档线上链接&#xff08;可在线阅读与下载&#xff09;&#…

nssctf(Web刷题)

[SWPUCTF 2021 新生赛]gift_F12 打开题目是一个时间页面&#xff0c;不过看了一会儿发现没有什么用 直接F12打开网页源代码 CtrlF搜索flag 找到了flag NSSCTF{We1c0me_t0_WLLMCTF_Th1s_1s_th3_G1ft} [第五空间 2021]签到题 NSSCTF{welcometo5space} [SWPUCTF 2021 新生赛…

MySQL备份与日志练习

1、创建对mysql数据库test1的定时备份任务&#xff0c;频率是每周一的2点 create database test1;crond -e0 2 * * 1 mysqldump -u root -pAdmin123 --databases test1 > /opt/test1.sql2、test1中有t1、t2、t3三张表&#xff0c;要求只备份t2这张表 mysqldump -u root -pA…

JAVA 中 HTTP 基本认证(Basic Authentication)

目录 服务端这么做服务端告知客户端使用 Basic Authentication 方式进行认证服务端接收并处理客户端按照 Basic Authentication 方式发送的数据 客户端这么做如果客户端是浏览器如果客户端是 RestTemplat如果客户端是 HttpClient 其它参考 服务端这么做 服务端告知客户端使用 …