springboot 2.x 集成vue history模式的项目

本文介绍了在SpringBoot2.x中如何解决Vue项目使用history模式时,刷新或直接访问URL导致的404错误。通过配置WebServerFactoryCustomizer,将404错误页面重定向到/index.html,实现了SPA应用的正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于springboot2.x中弃用了EmbeddedServletContainerCustomizer,在springboot2.x中使用的是WebServerFactoryCustomizer,
对于vue项目,有两种路由模式:hash,history,查看路由中的mode属性,若不是history,请忽略本博客。

hash模式中,访问地址栏会有#的出现,而history没有#,会更美观一些。在history模式中,项目打包后不能直接打开index.html,需要使用nginx或者集成在后端代码中,nginx请参考另一篇博客,当集成在springboot中,会有刷新或访问网址出现404报错,以下代码是解决方法。

vue中路由设置

const router = new VueRouter({
    mode: 'history',
    routes
})

springboot中 *****Application.java代码

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.server.ConfigurableWebServerFactory;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.WebServerFactoryCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.http.HttpStatus;

@SpringBootApplication
public class MusicApplication {

    public static void main(String[] args) {
        SpringApplication.run(MusicApplication.class, args);
    }

    @Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> myWebServerFactoryCustomizer(){
        return new WebServerFactoryCustomizer<ConfigurableWebServerFactory>() {
            @Override
            public void customize(ConfigurableWebServerFactory factory) {
                ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
                factory.addErrorPages(error404Page);
            }
        };
    }

}
### 整合多个Vue项目到单个Spring Boot应用的方法 #### 1. 构建独立的前端工程 对于每一个Vue项目,按照标准流程构建并配置好各自的`vue.config.js`文件。确保每个Vue应用程序能够单独运行,并且可以被打包成静态资源。 ```javascript // vue.config.js 示例 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/app-name/' // 生产环境下的路径前缀 : '/' }; ``` 当这些Vue项目被编译后会生成一系列HTML、CSS和JavaScript等静态文件[^1]。 #### 2. 配置多模块Maven/Spring Boot项目结构 为了管理不同版本或类型的前端应用,在Spring Boot项目的根目录下建立子模块来分别对应各个Vue项目。这样做的好处是可以让不同的前端团队专注于各自的应用程序开发而不互相干扰。 例如: ``` spring-boot-multi-vue/ ├── pom.xml (父POM) └── modules/ ├── module-a/ (第一个Vue项目对应的Java服务端逻辑) │ └── src/main/resources/static/appA -> ../../../../frontend-app-A/dist/ ├── module-b/ (第二个Vue项目对应的Java服务端逻辑) │ └── src/main/resources/static/appB -> ../../../../frontend-app-B/dist/ ... ``` 这里通过软链接的方式将打包后的Vue项目成果连接至相应的Spring Boot模块中的`static`文件夹内[^2]。 #### 3. 设置反向代理规则 如果希望所有的请求都经过同一个域名访问,则可以在Nginx或其他Web服务器上设置反向代理规则;也可以利用Spring Cloud Gateway作为API网关来进行统一入口管理和路由分发给后台微服务以及前端SPA(Single Page Application)页面。 在application.yml中定义如下形式的转发规则: ```yaml server: servlet: context-path: /api # API接口的基础URL management: endpoints: web: exposure: include: "*" spring: mvc: static-path-pattern: /** security: ignored: /**/* # 对于其他非API URL, 转发到index.html处理404问题(适用于前端路由模式的历史模式history mode) thymeleaf: cache: false ``` 以上配置使得任何未匹配到具体RESTful API endpoint的HTTP GET请求都会返回位于classpath:/static/index.html的内容,从而支持基于History Mode 的Vue Router工作方式。 #### 4. 统一认证授权机制 考虑到安全性因素,建议采用OAuth2/OpenID Connect协议实现跨域的身份验证与权限控制。这不仅限定了合法用户的范围还保护了敏感数据的安全传输。可以通过Keycloak这样的开源产品快速搭建一套完整的身份管理系统并与现有系统集成起来。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值