前言:原来部署项目结构都是api.xxx.com;backend.xxx.com;这样的两个域名,其中api是请求接口,backend是后台入口,这是是入口,也就是将vue build之后的静态资源直接放到backend后面,相当于backend只是一个纯静态网站,与小程序,APP、H5等共同访问api提供的数据接口,通过带的不同请求参数来判断是哪个端;日前,公司要求把不同接口拆分出来,做成类似mp.xxx.com、h5.xxx.com的按应用场景来区分的接口形式,在让后端的静态网站占用一个域名,觉得太多域名要配置了,所以想着整合进backend后端服务中
版本信息
spring-boot: 2.4.3
vue: 2.6.11
- ① vue打包,这个就是在项目中npm run bulid;得到如下:(lib是自定义的方法库,标准打包没有)
- ② 复制到backend模块中的/resources/static中:
- ③ 新建一个配置类
@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 直接把全部的请求资源加到static上,目的是干掉请求链接中的/static/**,这里不与vue打包产生的static文件夹冲突
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
}
}
到这里就可以使用backend.xxx.com/index.html访问了
- ④ 添加一个controller,里面就一个方法,用来转发请求
@Controller
@RequestMapping("/")
public class IndexController {
@Autowired
RedisService redisService;
@RequestMapping({"", "index"})
public String index() {
// thymeleaf的转发写法,重定向跳转后会带有/index.html
return "forward:/index.html";
}
}
这样就不带有html了,目前遇到有些小问题,有几个界面找不到vue组件中的方法,等解决了再来补充
如有其它小伙伴有更简单的办法,欢迎指正分享