vue打包部署到springboot并通過tomcat運(yùn)行的操作方法
- tomcat默認(rèn)端口 8080
- springboot端口 9132
- vue 端口 9131
框架
項(xiàng)目是基于SpringBoot+Vue前后端分離的倉庫管理系統(tǒng)
- 后端:SpringBoot + MybatisPlus
- 前端:Node.js + Vue + element-ui
- 數(shù)據(jù)庫:mysql
一. 打包Vue項(xiàng)目
cmd中輸入命令 npm run build 后就可打包成功
打包完成后項(xiàng)目路徑下會(huì)生成一個(gè)新的文件夾dist,打包后的東西都在里面
二、整合Vue項(xiàng)目和SpringBoot項(xiàng)目
將Vue項(xiàng)目dist文件夾下的所有文件Copy到SpringBoot項(xiàng)目的resource/static目錄下
(沒有static就新建 一個(gè)static文件夾)
然后配置Spring
三、修改Pom文件
1. 設(shè)置打包為war包(如果不需要可以不設(shè)置)
默認(rèn)打包成 jar包
想要打包成war包,需要在pom文件中添加以下這一行
<packaging>war</packaging>
2 . 排除掉 web 里面自帶的 Tomcat
只需要在spring-boot-starter-web 這個(gè)依賴上添加如下內(nèi)容:
<exclusions> <exclusion> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> </exclusion> </exclusions>
3. 添加一個(gè)自己的 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
的版本進(jìn)入你的Maven本地倉庫目錄(默認(rèn)是
~/.m2/repository
),然后導(dǎo)航到org/springframework/boot/spring-boot-starter-tomcat
目錄,該目錄下會(huì)包含不同版本的文件夾,版本號(hào)就包含在這些文件夾名稱中。
四、添加配置類
在SpringBoot同級(jí)目錄下添加一下配置類ServletInitializer
讓其繼承一個(gè)類:SpringBootServletInitializer,并且覆蓋 configure 方法,在方法中添加 return builder.sources(WarehouseSystemApplication.class);
其中:WarehouseSystemApplication.class是 啟動(dòng)類類名(每個(gè)人都不一樣)
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); } }
或者重新寫一個(gè)類 SpringBootStartApplication,和WarehouseSystemApplication平級(jí),
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方法執(zhí)行的Application啟動(dòng)類 return builder.sources(WarehouseSystemApplication.class); } }
五、設(shè)置 configurations
Run -->Edit Configurations
六、選擇Tomcat運(yùn)行
運(yùn)行后自動(dòng)調(diào)轉(zhuǎn)網(wǎng)頁
七、跨域問題
存在跨域問題,不處理的話登錄時(shí)會(huì)出現(xiàn)如下問題AxiosError: Network Error
要么設(shè)置跨域訪問(各種操作后還是不行,后續(xù)解決)
要么把tomcat/springboot/vue端口都設(shè)置一致,比如都設(shè)置為 9131 (完美解決~)
到此這篇關(guān)于vue打包部署到springboot,通過tomcat運(yùn)行的文章就介紹到這了,更多相關(guān)vue打包部署到springboot,內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- SpringBoot+Vue項(xiàng)目部署上線的實(shí)現(xiàn)示例
- SpringBoot + Vue 項(xiàng)目部署上線到Linux 服務(wù)器的教程詳解
- SpringBoot+Vue項(xiàng)目打包部署完整步驟教程
- vue打包部署到springboot的實(shí)現(xiàn)示例
- 打包部署若依(RuoYi)SpringBoot后端和Vue前端圖文教程
- SpringBoot+Vue 前后端合并部署的配置方法
- 部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)
- springboot+vue項(xiàng)目從第一行代碼到上線部署全流程
相關(guān)文章
Vue3使用pinia進(jìn)行數(shù)據(jù)添加、修改和刪除的操作代碼
Pinia?是?Vue?3?的官方狀態(tài)管理庫,旨在提供一種簡(jiǎn)單、靈活且類型安全的狀態(tài)管理解決方案,Pinia?的設(shè)計(jì)理念與?Vuex?類似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進(jìn)行數(shù)據(jù)的添加、修改和刪除,需要的朋友可以參考下2025-03-03Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項(xiàng)目過程中,經(jīng)常會(huì)用到組件來管理不同的功能,有一些公共的組件會(huì)被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父?jìng)髯?、子傳父、非父子組件傳值,需要的朋友參考下吧2018-08-08Vue2.0設(shè)置全局樣式(less/sass和css)
這篇文章主要為大家詳細(xì)介紹了Vue2.0設(shè)置全局樣式(less/sass和css),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11