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.pswp.cn/diannao/13839.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/13839.shtml
英文地址,請注明出處:http://en.pswp.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;她感到“震驚”和“憤怒…