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

作者：笔触狂放9 | 2024-05-14 06:02:36

踩

springboot打包vue3

概述

一般来说，前后端分离项目，比如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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/567634