springboot 项目配置两个vue项目的 dist

项目开发中，一般都会使用 SpringBoot+Vue 进行前后端分离这样的开发方式。

在部署时，会后端启动一个服务，再启动一个nginx，nginx中配置前端打包文件 dist 进行项目访问。

除此之外，我们也可以把打包好的 dist 目录放在 SpringBoot 项目的 resources下进行部署。

在一个 Spring Boot 项目中，不单可以配置一个 vue项目，还可以配置多个Vue项目的dist目录。

实现这一点的常见方法是将不同的 Vue 项目的静态资源分别放在Spring Boot 项目的不同静态资源路径下，并配置Spring Boot的资源映射。

下面是一个实现多个Vue项目的静态资源配置的示例：

目录结构

假设你的项目结构如下：

springboot-vue-multi
├── backend
│   ├── src
│   │   ├── main
│   │   │   ├── java
│   │   │   └── resources
│   │   │       ├── static
│   │   │       │   ├── app1
│   │   │       │   └── app2
├── frontend
│   ├── app1
│   │   ├── dist
│   ├── app2
│   │   ├── dist

配置拦截器

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Resource
    private TokenInterceptor tokenInterceptor ;
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(tokenInterceptor).addPathPatterns("/**");
    }
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 将根路径 "/" 的请求重定向到 "/index.html"
        registry.addViewController("/").setViewName("forward:/index.html");
        WebMvcConfigurer.super.addViewControllers(registry);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 添加资源处理器，用于映射静态资源路径
        registry.addResourceHandler("/**").addResourceLocations("classpath:/dist/");
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

TokenInterceptor 是自定义的 token 拦截器，可以通过拦截器对所有的请求进行token校验。

需要手动加上如果请求地址为"/"时，放行即可。

项目启动

我的项目端口为 8090，访问 http://localhost:8090 效果

具体实现步骤

1. Vue项目打包

假设你有两个Vue项目，app1和app2，分别在frontend/app1和frontend/app2目录下。

为每个Vue项目配置vue.config.js，指定输出目录。例如，对于app1：

// frontend/app1/vue.config.js
module.exports = {
  outputDir: path.resolve(__dirname, '../../backend/src/main/resources/static/app1')
};

对于app2：

// frontend/app2/vue.config.js
module.exports = {
  outputDir: path.resolve(__dirname, '../../backend/src/main/resources/static/app2')
};

运行打包命令，将会把app1和app2的打包文件分别放在Spring Boot项目的静态资源目录中：

# 在 frontend/app1 目录下
npm run build

# 在 frontend/app2 目录下
npm run build

2. Spring Boot配置

确保Spring Boot应用的静态资源映射正确。例如，在application.properties中：

spring.resources.static-locations=classpath:/static/

3. Controller配置

为每个应用创建一个控制器，映射到各自的静态资源目录。

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

@Controller
public class WebController {

    @RequestMapping("/app1/**")
    public String app1() {
        return "forward:/app1/index.html";
    }

    @RequestMapping("/app2/**")
    public String app2() {
        return "forward:/app2/index.html";
    }
}

这个配置确保了对/app1和/app2路径的请求被转发到相应的index.html，从而加载各自的Vue应用。

4. 访问路径

启动Spring Boot应用后，你可以通过以下路径访问各个Vue项目：

• http://localhost:8080/app1/ 访问第一个Vue项目
• http://localhost:8080/app2/ 访问第二个Vue项目

通过这种方式，你可以在一个Spring Boot项目中同时配置和部署多个Vue项目的dist文件夹。