vue3项目打包后整合到springboot项目中运行

概述

一般来说，前后端分离项目，比如vue3+springboot的前后端分离项目，一般把vue3项目打包后部署到nginx或者tomcat上面，springboot项目单独打包。

那如果想把vue3项目打包后直接部署到springboot项目中，如何做那？

VUE3项目

创建vue项目

创建项目

npm init vue@latest

安装依赖

cd 项目名

npm install

启动开发服务器（项目目录）

npm run dev

如果要部署到springboot项目中，打包前要修改vite.config.js文件，如下

添加  base:’./’

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base:'./'
})

打包vue项目

npm run build

springboot项目

我采用手动搭建springboot项目的方式

创建maven项目

修改pom.xml文件

需要添加的依赖

 
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
 
        
            org.springframework.boot
            spring-boot-starter-web
        

全部代码

    4.0.0

    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.8
        
    

    org.example
    springboot-demo1
    1.0-SNAPSHOT

    
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        


        
        
            org.projectlombok
            lombok
            true
        
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

修改application.yml文件

server:
  port: 8080

spring:
  # 打成jar包必须添加如下配置才能找到页面
  thymeleaf:
    mode: HTML
    cache: false
    prefix: classpath:/templates

编写启动类

package jkw;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Main {
    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }
}

编写跳转控制器

package jkw.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 页面跳转控制器
 */
@Controller
public class PageController {
    //后台页面
    @RequestMapping("/back/{backPage}")
    public String backPage(@PathVariable String backPage) {
        return "/back/" + backPage;
    }

    //前台页面
    @RequestMapping("/front/{frontPage}")
    public String frontPage(@PathVariable String frontPage) {
        return "/front/" + frontPage;
    }
    
}

整合

springboot项目

resources下面创建static和templates两个文件夹，分别存放静态文件和动态页面

连个文件夹中都创建back和front文件，一个是前台，一个是后台

vue项目

把打包好的vue项目中的dist文件中assets和favicon.ico放在static中back

index.html放在templates中back

修改index.html中引入资源的文置，如下

启动springboot项目，访问

localhost:8081/back/index