在 SpringBoot 中部署 vue 工程（history 模式）

未测试通过，需要接着研究！！！

未测试通过，需要接着研究！！！

未测试通过，需要接着研究！！！

要使用 history 模式，那么参考上一个文档 在 SpringBoot 中部署 vue 工程（hash 模式） 中，需要做些修改。

前端修改

前端修改 1：路由使用 createWebHistory()

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
  strict: true,
})

后端修改

使用 history 时，默认刷新页面会找不到页面，这时候需要后端回到首页。下面有两种修改方式，二选一即可。

后端修改 1：方案一：添加 WebServerFactoryCustomizer Bean

@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
    return (factory -> {
        ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/vita/index.html");
        factory.addErrorPages(errorPage404);
    });
}

后端修改 1：方案二：添加 NotFoundErrorPageRegistrar 类

package com.github.mengweijin.relx.config;

import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;

/**
 * Vue 项目打包部署到 nginx 服务器下，我们一般 router 的 hitory 使用 createWebHistory 来去掉 url 中的 #
 * 但如果要打包并部署到 springboot 下的 static/vita 目录，默认只能用 createWebHashHistory 才不会有问题。
 * 如果使用 createWebHistory，访问页面也没问题，但是刷新一下页面就 404 了。
 *
 * 但我们又想使用 createWebHistory 模式，还不想刷新时出现页面 404 的问题，所有在这里处理一下。
 *
 * @author mengweijin
 * @date 2022/5/2
 */
@Component
public class NotFoundErrorPageRegistrar implements ErrorPageRegistrar {
    @Override
    public void registerErrorPages(ErrorPageRegistry registry) {
        ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/vita/index.html");
        registry.addErrorPages(error404Page);
    }
}