欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue打包部署到springboot并通過tomcat運(yùn)行的操作方法

 更新時(shí)間:2024年05月28日 10:50:31   作者:young  
這篇文章主要介紹了vue打包部署到springboot并通過tomcat運(yùn)行的操作方法,本文通過實(shí)例圖文并茂的形式給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
  • 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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue 富文本編輯器tinymce的安裝配置使用教程

    Vue 富文本編輯器tinymce的安裝配置使用教程

    TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下
    2023-09-09
  • Vue3使用pinia進(jìn)行數(shù)據(jù)添加、修改和刪除的操作代碼

    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-03
  • 如何用vue封裝axios請(qǐng)求

    如何用vue封裝axios請(qǐng)求

    對(duì)axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理,有助于我們簡(jiǎn)化代碼,方便后期維護(hù)。本文介紹了如何用vue封裝axios請(qǐng)求,感興趣的同學(xué),可以參考下。
    2021-06-06
  • vue通過接口直接下載java生成好的Excel表格案例

    vue通過接口直接下載java生成好的Excel表格案例

    這篇文章主要介紹了vue通過接口直接下載java生成好的Excel表格案例
    2020-10-10
  • Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)

    Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)

    在Vue的框架開發(fā)的項(xiàng)目過程中,經(jīng)常會(huì)用到組件來管理不同的功能,有一些公共的組件會(huì)被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父?jìng)髯?、子傳父、非父子組件傳值,需要的朋友參考下吧
    2018-08-08
  • Vue2.0設(shè)置全局樣式(less/sass和css)

    Vue2.0設(shè)置全局樣式(less/sass和css)

    這篇文章主要為大家詳細(xì)介紹了Vue2.0設(shè)置全局樣式(less/sass和css),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue2中使用tailwindCss的詳細(xì)教程

    Vue2中使用tailwindCss的詳細(xì)教程

    Tailwind CSS是一個(gè)流行的前端CSS框架,它基于原子設(shè)計(jì)原則,提供了一套預(yù)構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下
    2024-09-09
  • Vue 的 v-model用法實(shí)例

    Vue 的 v-model用法實(shí)例

    這篇文章主要介紹了Vue 的 v-model用法實(shí)例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-11-11
  • 深入理解Vue3響應(yīng)式原理

    深入理解Vue3響應(yīng)式原理

    響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • Vue狀態(tài)管理工具Pinia的安裝與使用教程

    Vue狀態(tài)管理工具Pinia的安裝與使用教程

    這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學(xué)習(xí)如何將pinia運(yùn)用到項(xiàng)目實(shí)戰(zhàn)中去,文中有詳細(xì)的安裝教程和使用方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
    2024-03-03

最新評(píng)論