vue3项目打包后整合到springboot项目中运行-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文件

需要添加的依赖

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

全部代码

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

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

    <groupId>org.example</groupId>
    <artifactId>springboot-demo1</artifactId>
    <version>1.0-SNAPSHOT</version>

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


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



</project>

修改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中引入资源的文置，如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/back/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/back/assets/index-1973819a.js"></script>
    <link rel="stylesheet" href="/back/assets/index-4afc3c58.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

启动springboot项目，访问

localhost:8081/back/index文章来源地址https://www.toymoban.com/news/detail-754305.html

到了这里，关于vue3项目打包后整合到springboot项目中运行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！