vue路由history模式springBoot/Nginx配置

 

 精确配置路由

• 在配置路由时，要确保数据接口的路由配置在这个宽泛规则之前，并且路由规则尽量精确。比如：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ApiController {

    // 精确的数据接口路由
    @GetMapping("/api/users")
    public String getUsers() {
        return "List of users";
    }

    // 宽泛的单页面应用路由
    @GetMapping("/{path:[^\\.]*}")
    public String forward() {
        return "forward:/index.html";
    }
}

这样，当请求 /api/users 时，会优先匹配 @GetMapping("/api/users") 方法，而不是 /{path:[^\\.]*}

区分 API 前缀

• 为数据接口统一添加特定的前缀，如 /api，并且在配置路由时，优先处理这些带前缀的路径。同时，可以调整宽泛规则的匹配路径，避免和 API 路径冲突。

@RestController
public class ApiController {

    // 带 API 前缀的数据接口路由
    @GetMapping("/api/**")
    public String handleApiRequest() {
        return "This is an API response";
    }

    // 单页面应用路由，排除 API 前缀路径
    @GetMapping("/{path:^(?!api).*}")
    public String forward() {
        return "forward:/index.html";
    }
}

• 这里 /{path:^(?!api).*} 表示匹配不以 api 开头的路径，进一步确保数据接口不会被误转发。

通过以上机制和措施，可以有效避免正常的数据请求被误转发到 index.html。

nginx

server {
        #根路径配置
        location / {
            # root 指定到前端打包文件夹
            root /views/vue3_demo/root_router;
            # 核心通过try_files 
            # 1）优先到root_router目录查找对应的资源
            # 2）找不到对应的资源，将url路径当目录找
            # 3）目录也没有，就固定rewite到/index.html路径
            try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }
}