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

时间：2025-04-12 20:44:04

概述

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

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

VUE3项目

创建vue项目

创建项目

npm init vue@latest

安装依赖

cd 项目名

npm install

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

npm run dev

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

添加  base:'./'

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

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

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

打包vue项目

npm run build

springboot项目

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

创建maven项目

修改文件

需要添加的依赖

 <!--thymeleaf-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
 <!--springMVC-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

全部代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="/POM/4.0.0"
         xmlns:xsi="http:///2001/XMLSchema-instance"
         xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId></groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.8</version>
        <relativePath/>
    </parent>

    <groupId></groupId>
    <artifactId>springboot-demo1</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <!--thymeleaf-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>


        <!--lombok-->
        <dependency>
            <groupId></groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--springMVC-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--springBoot起步依赖-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <!--test-->
        <dependency>
            <groupId></groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>



</project>

修改文件

server:
  port: 8080

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

编写启动类

package jkw;

import ;
import ;

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

编写跳转控制器

package ;

import ;
import ;
import ;

/**
 * 页面跳转控制器
 */
@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和放在static中back

放在templates中back

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/back/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/back/assets/"></script>
    <link rel="stylesheet" href="/back/assets/">
  </head>
  <body>
    <div ></div>
    
  </body>
</html>

启动springboot项目，访问

localhost:8081/back/index

相关文章