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