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");
    }
    @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 (完美解决~)

  

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PHP在线制作表白网源码

PHP在线制作表白网源码&#xff0c;送女友个惊喜吧&#xff0c;无数据库&#xff0c;上传就能用&#xff0c;后台/admin&#xff0c;账号密码都是admin 百度网盘&#xff1a;https://pan.baidu.com/s/1rbD2_8IsP9UPLK-cdgEXfA?pwdre59

前端绘制流程节点数据

根据数据结构和节点的层级、子节点id&#xff0c;前端自己绘制节点位置和关联关系、指向、已完成节点等 <template><div><div>通过后端节点和层级&#xff0c;绘制出节点以及关联关系等</div><div class"container" ref"container&…

本地centos7+docker+ollama+gpu部署

1、一台有 NVIDIA GPU 驱动的机器 2、Docker CE安装 # 删除旧版本的 Docker&#xff08;如果存在&#xff09; sudo yum remove -y docker docker-common docker-selinux docker-engine # 安装必要的软件包&#xff1a; sudo yum install -y yum-utils device-mapper-persiste…

springboot3项目练习详细步骤(第四部分:文件上传、登录优化、多环境开发)

目录 本地文件上传 接口文档 业务实现 登录优化 SpringBoot集成redis 实现令牌主动失效机制 多环境开发 本地文件上传 接口文档 业务实现 创建FileUploadController类并编写请求方法 RestController public class FileUploadController {PostMapping("/upload&…

EPBU/MOBI转PDF

--痛苦 --不爱BB 直接上码。 写了一个java方法&#xff0c;转epub 或者mobi 为 pdf的方法 &#xff08;单个转换&#xff09; import java.io.BufferedReader; import java.io.File; import java.io.IOException; import java.io.InputStreamReader;public class EbookConvert…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(八)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 15 节&#xff09; P15《14.ArkUI组件-状态管理state装饰器》 回到最初的 Hello World 案例&#xff0c;首先验证 如果删掉 State…

【BSP开发经验】用户态栈回溯技术

前言 在内核中有一个非常好用的函数dump_stack, 该函数在我们调试内核的过程中可以打印出函数调用关系&#xff0c;该函数可以帮助我们进行内核调试&#xff0c;以及让我们了解内核的调用关系。同时当内核发生崩溃的时候就会自己将自己的调用栈输出到串口。 栈回溯非常有利于我…

动态规划(算法)---01.斐波那契数列模型_第N个泰波那契数

前言&#xff1a; 有一个很著名的公式 “程序数据结构算法”。 算法是模型分析的一组可行的&#xff0c;确定的&#xff0c;有穷的规则。通俗的说&#xff0c;算法也可以理解为一个解题步骤&#xff0c;有一些基本运算和规定的顺序构成。但是从计算机程序设计的角度看&#xff…

【计算机网络实验】TCP协议的抓包分析:三次握手四次挥手UDP和TCP的区别(超详细教程)

计算机网络实验——TCP协议抓包分析 文章目录 计算机网络实验——TCP协议抓包分析一、基础知识点1、运输层两个重要协议的特点对比&#xff08;TCP和UDP&#xff09;2、TCP报文的格式3、常见的TCP报文标识字段&#xff08;FLAG字段&#xff09;4、TCP连接的建立过程及理解——三…

RPC原理技术

RPC原理技术 背景介绍起源组件实现工作原理 背景 本文内容大多基于网上其他参考文章及资料整理后所得&#xff0c;并非原创&#xff0c;目的是为了需要时方便查看。 介绍 RPC&#xff0c;Remote Procedure Call&#xff0c;远程过程调用&#xff0c;允许像调用本地方法一样调…

LiveGBS流媒体平台GB/T28181用户手册-电子地图:视频标记在地图上播放、云台控制、语音对讲

LiveGBS流媒体平台GB/T28181用户手册-电子地图:视频标记在地图上播放、云台控制 1、电子地图1.1、播放1.2、云台控制对讲 2、搭建GB28181视频直播平台 1、电子地图 1.1、播放 1.2、云台控制对讲 点击 后&#xff0c;如果是球机就可以云台控制&#xff0c;支持对讲的摄像头&…

【openlayers系统学习】1.3交互-修改要素(features)

三、修改要素 Modifying features 修改要素 现在我们有一种方法可以让用户将数据加载到编辑器中&#xff0c;我们希望让他们编辑功能。为此&#xff0c;我们将使用 Modify​ 交互&#xff0c;将其配置为修改矢量源上的功能。 首先&#xff0c;在 main.js​ 中导入 Modify​ …

使用字节豆包大模型在 Dify 上实现最简单的 Agent 应用(四):AI 信息检索

这篇文章&#xff0c;我们继续聊聊&#xff0c;如何折腾 AI 应用&#xff0c;把不 AI 的东西&#xff0c;“AI 起来”。在不折腾复杂的系统和环境的前提下&#xff0c;快速完成轻量的 Agent 应用。 写在前面 在上一篇文章《使用 Dify、Meilisearch、零一万物模型实现最简单的…

Leetcode 876. 链表的中间结点

题目描述 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&#xff0c…

【关键字】——register在C语言中的使用

register——寄存器 了解register之前&#xff0c;应该先认识认识寄存器&#xff0c;何为寄存器&#xff1f; 在计算机中&#xff0c;数据可以存储在远程二级存储&#xff08;网盘&#xff0c;服务器&#xff09;&#xff0c;本地二级存储&#xff08;本地磁盘&#xff09;&am…

Linux多线程系列三: 生产者消费者模型,信号量使用,基于阻塞队列和环形队列的这两种生产者消费者代码的实现

Linux多线程系列三: 生产者消费者模型,信号量,基于阻塞队列和环形队列的这两种生产者消费者代码的实现 一.生产者消费者模型的理论1.现实生活中的生产者消费者模型2.多线程当中的生产者消费者模型3.理论 二.基于阻塞队列的生产者消费者模型的基础代码1.阻塞队列的介绍2.大致框架…

零基础小白撸空投攻略:空投流程是什么样的? 如何操作?

在Web3的世界中&#xff0c;空投&#xff08;Airdrop&#xff09;是一种常见的营销和推广策略&#xff0c;通过向特定用户群体免费分发代币&#xff0c;项目方希望能够吸引更多的用户和关注。对于许多刚刚接触加密货币和区块链的新手来说&#xff0c;都会疑惑空投的流程究竟是什…

CTFshow之文件上传web入门151关-161关解密。包教包会!!!!

这段时间一直在搞文件上传相关的知识&#xff0c;正好把ctf的题目做做写写给自字做个总结&#xff01; 不过有一个确定就是所有的测试全部是黑盒测试&#xff0c;无法从代码层面和大家解释&#xff0c;我找个时间把upload-labs靶场做一做给大家讲讲白盒的代码审计 一、实验准…

STM32自己从零开始实操02:输入部分原理图

一、触摸按键 1.1指路 项目需求&#xff1a; 4个触摸按键&#xff0c;主控芯片 TTP224N-BSBN&#xff08;嘉立创&#xff0c;封装 TSSOP-16&#xff09;&#xff0c;接入到 STM32 的 PE0&#xff0c;PE1&#xff0c;PE2&#xff0c;PE3。 1.2走路 1.2.1数据手册重要信息提…

Redis常见数据类型(4) - hash, List

hash 命令小结 命令执行效果时间复杂度hset key field value设置值O(1)hget key field获取值O(1)hdel key field [field...]删除值O(k), k是field个数hlen key计算field个数O(1)hgetall key获取所有的field-valueO(k), k是field的个数hmget field [field...]批量获取field-va…