将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南

news2025/2/24 6:52:41

将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南

在现代 Web 开发中，前后端分离架构已经成为主流。然而，在某些场景下，我们可能需要将前端项目（如 Vue）与后端项目（如 Spring Boot）集成部署。

本文将详细介绍如何将 Vue 项目打包后部署到 Spring Boot 项目中，包括必要的配置步骤和注意事项。

目录

  • 将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南
    • 项目概述
    • 前提条件
    • 步骤一：配置 Vue 项目
      • 1.1 修改 `vite.config.js` 文件
      • 1.2 打包 Vue 项目
    • 步骤二：搭建 Spring Boot 项目
      • 2.1 创建 Maven 项目
      • 2.2 修改 `pom.xml` 文件
      • 2.3 配置 `application.yml` 文件
      • 2.4 编写启动类
      • 2.5 编写跳转控制器
    • 步骤三：整合 Vue 项目到 Spring Boot 项目
      • 3.1 创建静态资源和模板目录
      • 3.2 复制 Vue 打包文件到 Spring Boot 项目
      • 3.3 修改 `index.html` 中的资源路径
    • 步骤四：启动并测试
    • 附加配置：修改前端后端服务地址
    • 附加配置：修改前端 URL 转发
    • Nginx配置[可选]
      • 1.基本思路
      • 2.示例配置
      • 3.重启
      • 4.Vite配置
    • 常见问题及解决方案
    • 总结

项目概述

本文将指导你如何将一个基于 Vue 3 的前端项目打包后，部署到一个基于 Spring Boot 的后端项目中。通过这种方式，你可以将前后端项目集成在一个应用中，简化部署流程。

前提条件

  • 已安装 Node.js 和 npm
  • 已安装 Java 和 Maven
  • 已安装 Spring Boot 和 Vue CLI 或 Vite（本文以 Vite 为例）
  • 基本的 Java 和 JavaScript 知识

步骤一：配置 Vue 项目

1.1 修改 vite.config.js 文件

为了确保 Vue 项目在打包后能够正确引用静态资源，需要修改 vite.config.js 文件，添加 base:'./' 配置。

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

1.2 打包 Vue 项目

在 Vue 项目根目录下运行以下命令进行打包：

npm run build

打包完成后，会在项目根目录下生成一个 dist 文件夹，里面包含了编译后的静态文件。

在这里插入图片描述

步骤二：搭建 Spring Boot 项目

2.1 创建 Maven 项目

使用 Maven 创建一个新的 Spring Boot 项目。你可以使用 Spring Initializr 来快速生成项目结构。

2.2 修改 pom.xml 文件

在 pom.xml 中添加必要的依赖，包括 spring-boot-starter-thymeleaf 和 spring-boot-starter-web。

<!-- pom.xml -->
<dependencies>
    <!-- Thymeleaf [可选,不建议]-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    
    <!-- Spring MVC -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- Lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    
    <!-- Spring Boot Starter -->
    <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>

2.3 配置 application.yml 文件

在 src/main/resources 目录下创建或修改 application.yml 文件，配置 Thymeleaf 和静态资源路径
[可以不用Thymeleaf模板引擎]。

# application.yml
server:
  port: 8080

spring:
  web:
    resources:
      static-locations: classpath:/static/, classpath:/public/, classpath:/resources/,classpath:/META-INF/resources/
  mvc:
    static-path-pattern: /**
    # 实测用了Thymeleaf会导致vue某些布局出现一点点问题,建议不用
#    thymeleaf:
#      mode: HTML
#      cache: false
#      prefix: classpath:/templates/

2.4 编写启动类

创建主启动类 Main.java：

// src/main/java/demo/Main.java
package demo;

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);
    }
}

2.5 编写跳转控制器

创建控制器 PageController.java 以处理页面跳转：

// src/main/java/jkw/controller/PageController.java
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("/")
    public String FrontIndex() {
        return "forward:./index.html";
        // 重定向到前端首页
    }
}

步骤三：整合 Vue 项目到 Spring Boot 项目

3.1 创建静态资源和模板目录

在 src/main/resources 目录下创建 static 和 templates[不用Thymeleaf可以不创建templates] 文件夹，分别存放静态文件和动态页面。

3.2 复制 Vue 打包文件到 Spring Boot 项目

将 Vue 项目 dist 文件夹中的 assets 和 favicon.ico 文件复制到 static/ 目录下。

将 dist 文件夹中的 index.html 复制到 templates/ 目录下。

3.3 修改 index.html 中的资源路径

打开 index.html，修改资源引用路径：

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

确保所有资源路径都以 / 开头，这样 Spring Boot 才能正确找到静态资源。

步骤四：启动并测试

启动 Spring Boot 项目：

mvn spring-boot:run

在浏览器中访问 http://localhost:8080/，你应该能够看到 Vue 项目的页面。

附加配置：修改前端后端服务地址

在 Vue 项目的 .env.development 文件中，修改 TARGET 为正式环境后端服务 API 根地址：

# just a flag
ENV = 'development'

# backend api
TARGET = 'http://localhost:9000/'

附加配置：修改前端 URL 转发

  1. 方法一
    修改 .env 文件，将 VUE_APP_BASE_API 设置为空：
# base api

#VUE_APP_BASE_API = '/api'

VUE_APP_BASE_API = ''

原因：前后端独立部署时，前端会有一个转发配置 vue.config.js。但当部署到 Spring Boot 后，这个转发配置就无效了，必须将其去掉，否则所有对后端的请求都会带着 api 前缀，导致 404 错误。

  1. 方法二
  • 也可以通过Nginx伪静态控制后端接口往/api转发到本地8080

Nginx配置[可选]

1.基本思路

静态资源：由 Nginx 直接提供，路径为 /。
API 请求：所有以 /api 开头的请求被转发到后端 Spring Boot 服务（本地 8080 端口）。
其他请求：默认返回 Vue 应用的 index.html，由前端路由处理。

2.示例配置

假设你的 Vue 和 Spring Boot 项目都部署在同一个服务器上，Nginx 配置文件（通常位于 /etc/nginx/sites-available/default 或 /etc/nginx/conf.d/your_site.conf）可以如下配置：

server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名或IP

    root /path/to/your/vue/dist;  # Vue 项目的 dist 目录
    index index.html index.htm;

    # 处理静态资源
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 仅转发以 /api 开头的请求到后端 Spring Boot 服务
    location ^~ /api/ {
        proxy_pass http://localhost:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 可选：处理 WebSocket（如果需要）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # 可选：处理其他反向代理需求
    # location /other_proxy/ {
    #     proxy_pass http://other_service/;
    # }
}

3.重启

重新加载 Nginx 配置
在修改完 Nginx 配置文件后，测试配置是否正确：

sudo nginx -t

如果没有错误，重新加载 Nginx：

sudo systemctl reload nginx

4.Vite配置

  • Vite 配置调整
    为了确保前端 Vue 应用在构建时能够正确处理 API 请求的路径，需要调整 Vite 的配置。
  1. 修改 base 和 publicPath
    在 vite.config.js 中，设置 base 为 /，确保静态资源路径正确：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',  // 设置为根路径
  build: {
    // 可选：设置输出目录
    outDir: 'dist',
    // 可选：其他构建选项
  },
  // 其他配置...
})
  1. 配置代理（开发环境）
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端 Spring Boot 服务地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')  // 可选：根据需要重写路径
      }
    }
  },
  // 其他配置...
})
  1. 配置代理（生产环境）
    在生产环境中，由于 Nginx 已经处理了 /api 的转发，因此无需在 Vite 配置中额外处理。但是，确保前端代码中的 API 请求路径以 /api 开头。例如：
// 示例：使用 Axios 进行 API 请求
import axios from 'axios'

axios.defaults.baseURL = '/api'

// 现在，所有 Axios 请求都会自动加上 /api 前缀
axios.get('/users')
  .then(response => {
    console.log(response.data)
  })

常见问题及解决方案

  1. *资源路径错误
  2. *：确保 index.html 中的资源路径正确，并且 Spring Boot 的静态资源路径配置正确。
  3. 跨域问题：如果前后端分离部署，需要配置 CORS 策略。
  4. 缓存问题：在开发过程中，清理浏览器缓存或使用无缓存模式进行测试。
  5. 权限问题：确保 Spring Boot 项目有权限访问 Vue 项目的静态资源。

总结

通过以上步骤，你可以将 Vue 项目打包后部署到 Spring Boot 项目中，实现前后端项目的集成。这种方式简化了部署流程，但也带来了一些挑战，如资源路径配置和静态资源管理。
根据具体需求，你可能需要进一步优化配置，例如使用 Spring Boot 的静态资源处理机制来管理前端资源，或者使用更复杂的构建工具来处理前端和后端的集成。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2304253.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GPIO外设

GPIO外设

一、GPIO简介 GPIO&#xff0c;general-purpos IO port,通用输入输出引脚&#xff0c;所有的GPIO引脚都有基本的输入输出功能。 最基本的输出功能&#xff1a;STM32控制引脚输出高、低电平&#xff0c;实现开关控制&#xff1b;最基本的输入功能&#xff1a;检测外部输入电平&…
阅读更多...
C++——priority_queue模拟实现

C++——priority_queue模拟实现

目录 前言 一、优先级队列介绍 二、优先级队列实现 向上调整 向下调整 三、仿函数 总结 前言 上一篇文章我们讲了stack和queue&#xff0c;这两个容器是容器适配器&#xff0c;本质上是一种复用&#xff0c;那本篇文章要讲的优先级队列也是一个容器适配器&#xff0c;我们…
阅读更多...
计算机网络基础：DOS命令、批处理脚本常见命令

计算机网络基础：DOS命令、批处理脚本常见命令

目录 1. DOS 基础命令 1. echo 、 > 编写文件 2. type 读取文件 3. copy con 整段编写 4. attrib 命令 5. 快速生成空文件 6. 修改关联性 7. 关机shutdown 8. 复制文件copy、移动文件move 9. 重命名ren 2. 批处理 2.1 简单显示 2.2 死循环 2.3 定时关机小程序 …
阅读更多...
ArcGIS Pro热力图制作指南：从基础到进阶

ArcGIS Pro热力图制作指南：从基础到进阶

引言 在地理信息科学领域&#xff0c;热力图作为一种直观的数据可视化手段&#xff0c;广泛应用于展示空间数据的密度和热度分布。ArcGIS Pro&#xff0c;作为一款强大的地理信息系统&#xff08;GIS&#xff09;软件&#xff0c;为我们提供了制作热力图的便捷工具。本文将从基…
阅读更多...
智慧校园系统在学生学习与生活中的应用

智慧校园系统在学生学习与生活中的应用

随着科技的快速发展&#xff0c;智慧校园系统逐渐成为现代教育不可或缺的一部分。它整合了先进的信息技术、物联网技术以及人工智能等&#xff0c;旨在构建一个全面、智能、个性化的学习与生活环境。对于学生而言&#xff0c;这一系统不仅能够极大地提高学习效率&#xff0c;还…
阅读更多...
第三十四周学习周报

第三十四周学习周报

目录 摘要Abstract1 文献阅读1.1 相关知识1.1.1 贝叶斯优化1.1.2 注意力机制复习 1.2 模型框架1.3 实验分析 总结 摘要 在本周阅读的文献中&#xff0c;作者提出了一种将注意力机制与LSTM相结合的模型AT-LSTM。虽然传统LSTM通过其门控机制能有效捕捉时间序列中的长期依赖关系&…
阅读更多...
第4章 信息系统架构（三）

第4章 信息系统架构（三）

4.3 应用架构 应用架构的主要内容是规划出目标应用分层分域架构&#xff0c;根据业务架构规划目标应用域、应用组和目标应用组件&#xff0c;形成目标应用架构逻辑视图和系统视图。从功能视角出发&#xff0c;阐述应用组件各自及应用架构整体上&#xff0c;如何实现组织的高阶…
阅读更多...
一周学会Flask3 Python Web开发-flask3模块化blueprint配置

一周学会Flask3 Python Web开发-flask3模块化blueprint配置

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们在项目开发的时候&#xff0c;多多少少会划分几个或者几十个业务模块&#xff0c;如果把这些模块的视图方法都写在app.py…
阅读更多...
Android开发-深入解析Android中的AIDL及其应用场景

Android开发-深入解析Android中的AIDL及其应用场景

深入解析 Android 中的 AIDL 及其应用场景 1. 前言2. AIDL 的核心概念3. AIDL 的实现步骤3.1. 定义 AIDL 接口文件3.2. 实现服务端&#xff08;Service&#xff09;3.3. 客户端绑定与调用 4. AIDL 的典型应用场景4.1. 多进程应用4.2. 与系统服务交互4.3. 高性能 IPC4.4. 跨应用…
阅读更多...
基于python的旅客游记和轨迹分析可视化系统设计（新）

基于python的旅客游记和轨迹分析可视化系统设计（新）

项目地址&#xff1a;基于python旅客游记和轨迹分析可视化系统设计&#xff08;新&#xff09; 摘 要 旅客游记和轨迹分析可视化系统是一种能自动从网络上收集信息的工具&#xff0c;可根据用户的需求定向采集特定数据信息的工具&#xff0c;本项目通过研究爬取微博网来实现旅…
阅读更多...
HackTheBox靶场之Unrested 漏洞CVE-2024-42327 《CUser 类中的 user.get 函数中的 SQL 注入》

HackTheBox靶场之Unrested 漏洞CVE-2024-42327 《CUser 类中的 user.get 函数中的 SQL 注入》

目录 信息收集 web指纹收集 wappazer Nmap指纹收集 Nmap分析总结 漏洞利用 漏洞CVE-POC执行流程 信息收集 web指纹收集 wappazer 看着有apache2.4.52 那么可以试着找一下 apache的历史cve看可以利用否 使用用户名密码&#xff1a;matthew / 96qzn0h2e1k3 登录成后后…
阅读更多...
uniprot系列相关数据库介绍

uniprot系列相关数据库介绍

https://www.uniprot.org/uniprotkb/P49711/entry#family_and_domains 上面是一个CTCF human蛋白质条目&#xff0c; 我们来看看family & domain条目中涉及到的蛋白质家族以及结构域数据库&#xff1a; 1&#xff0c;funfam&#xff1a; CATH: Protein Structure Classi…
阅读更多...
基于AIGC的图表自动化生成工具「图表狐」深度评测：如何用自然语言30秒搞定专业级数据可视化？

基于AIGC的图表自动化生成工具「图表狐」深度评测：如何用自然语言30秒搞定专业级数据可视化？

一、工具核心定位&#xff1a;自然语言驱动的数据可视化 作为数据科学从业者&#xff0c;我们常面临非技术同事的图表制作需求。传统流程需经历数据清洗→结构转换→图表配置→样式调整四大阶段&#xff0c;耗时且易出错。 图表狐&#xff08;官网预览&#x1f447;&#xff…
阅读更多...
rpc到自己java实现rpc调用再到rpc框架设计

rpc到自己java实现rpc调用再到rpc框架设计

目录 rpc(Remote Procedure Call)rpc一般架构为什么要引入rpc自己实现rpc调用1. 新建一个maven项目&#xff0c;加入hessian依赖2. 服务端3. Stub代理4. 客户端测试输出5. rpc程序分析附 请求参数和序列化程序 6. 总结 回顾RPCRPC 序列化协议RPC 网络协议注册中心的引入dubbo框…
阅读更多...
Milvus向量数据库可视化客户端Attu

Milvus向量数据库可视化客户端Attu

概述 关于Milvus的介绍&#xff0c;可搜索网络资料。Milvus的使用还在摸索中&#xff1b;打算写一篇&#xff0c;时间待定。 关于Attu的资料&#xff1a; 官网GitHub文档 对于Milvus的数据可视化&#xff0c;有如下两个备选项&#xff1a; Milvus_cli&#xff1a;命令行工…
阅读更多...
【落羽的落羽 数据结构篇】顺序结构的二叉树——堆

【落羽的落羽 数据结构篇】顺序结构的二叉树——堆

文章目录 一、堆1. 概念与分类2. 结构与性质3. 入堆4. 出堆 二、堆排序三、堆排序的应用——TOP-K问题 一、堆 1. 概念与分类 上一期我们提到&#xff0c;二叉树的实现既可以用顺序结构&#xff0c;也可以用链式结构。本篇我们来学习顺序结构的二叉树&#xff0c;起个新名字—…
阅读更多...
基于STM32的智能农业大棚环境控制系统

基于STM32的智能农业大棚环境控制系统

1. 引言 传统农业大棚环境调控依赖人工经验&#xff0c;存在控制精度低、能耗高等问题。本文设计了一款基于STM32的智能农业大棚环境控制系统&#xff0c;通过多参数环境监测、作物生长模型与精准执行控制&#xff0c;实现大棚环境的智能优化&#xff0c;提高作物产量与品质。…
阅读更多...
Git常见命令--助力开发

Git常见命令--助力开发

git常见命令&#xff1a; 创建初始化仓库&#xff1a; git 将文件提交到暂存区 git add 文件名 将文件提交到工作区 git commit -m "注释&#xff08;例如这是发行的版本1&#xff09;" 文件名 查看状态 如果暂存区没有文件被提交显示&#xff1a; $ git status On…
阅读更多...
一：将windows上的Python项目部署到Linux上，并使用公网IP访问

一：将windows上的Python项目部署到Linux上，并使用公网IP访问

windows中python的版本&#xff1a;python3.13.1&#xff0c;项目使用的是虚拟环境解释器 linux系统&#xff1a;仅有python3.6.7 服务器&#xff1a;阿里云服务器有公网IP&#xff0c;访问端口XXXX 在linux上安装python3.13.1 linux中如果是超级管理员root&#xff0c;执行所…
阅读更多...
【数据标准】数据标准化是数据治理的基础

【数据标准】数据标准化是数据治理的基础

导读&#xff1a;数据标准化是数据治理的基石&#xff0c;它通过统一数据格式、编码、命名与语义等&#xff0c;全方位提升数据质量&#xff0c;确保准确性、完整性与一致性&#xff0c;从源头上杜绝错误与冲突。这不仅打破部门及系统间的数据壁垒&#xff0c;极大促进数据共享…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023