springboot 项目托管 vue 项目

一. 操作流程

整体流程如下

1. vue 项目打包
2. springboot 托管静态文件
3. 处理路由跳转问题

1. vue 项目打包

我的版本是 vue3 项目，使用了 vite，可以直接使用 vite build 命令将 vue 代码打包为独立的文件。（如果不是用 vite 也可以自己查一下如何打包）

打包后会在 dist 目录生成如下目录结构的文件（注意：那个 css 和 js 文件名每次都不一样）

这些文件以 index.html 为入口，会以相对路径调用 assets 路径下的 css 文件、js 文件以及静态资源。

2. springboot 托管静态文件

这些打包好的文件，进行静态资源托管后即可正常使用。你可以使用 nginx 来托管这些静态文件。

然而这次我们想使用 springboot 直接托管这些静态文件。

引入 spring-boot-starter-web 依赖，这时不需要额外的配置，只要放在 src/main/resources/static 文件夹下的文件，都可以被正确访问到。

例如，在 src/main/resources/static 中放一个 index.html 文件，地址 127.0.0.1:8080/index.html 就可以直接访问到 index.html 文件。

所以把 vue 打包好的文件放在 src/main/resources/static 目录下即可

3. 处理路由跳转问题

但在实际使用时，会发现有这样一个问题，就是前端代码会设置前端的路由跳转，例如从根路径跳转到一个业务路径（/ => /other_route）。

如果不离开这个页面还好，但是如果在其他路径刷新页面，或者浏览器直接输入其他路径访问，就会发现 404 无法访问的问题，那么这个问题如何解决呢？

在 springboot 代码中添加如下 Controller 即可解决这个问题（注意要列出所有需要支持的前端路由）

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class RouterController {

    @GetMapping({"/", "/home", "/about", "/user/**"})  // <=== 列出所有需要支持的前端路由
    public String forward() {
        return "forward:/index.html";
    }

}

二、原理详解

当浏览器访问路径 /some_path 的时候，依次发生如下事件：

1. 浏览器访问 SpringBoot Controller，路径是 /some_path
2. SpringBoot 在后端服务内，将请求转发给了 index.html（这里的核心是浏览器的地址不变，也没有跳转）
3. SpringBoot 服务器返回给前端 200 状态码，以及 index.html 的内容
4. 浏览器执行 index.html 中的 javascript 脚本（Vue 代码）
5. 脚本检测当前页面路径是 /some_path，执行了正确的路由操作

其他：return "index.html" 和 return "forward:/index.html" 的行为差异

• return "index.html"
  • 这会触发重定向（redirect）
  • 浏览器会收到 302/303 状态码
  • 浏览器会重新请求 index.html
  • URL 会变成 /index.html
  • Vue Router 读取到的是 /index.html
• return "forward:/index.html"
  • 这是服务器内部转发
  • 浏览器只收到一个响应
  • url 保持不变，仍然是原始 url
  • Vue Router 能正确读取到原始 url