最近要把一个spirngboot项目和vue整合一下。于是百度了一下,大部分的教程都是build前端vue项目,然后把生成的dist目录下的文件拷贝到resources下的static下即可,但是按照以上教程实际上项目启动后无法正常访问。在摸索了一段时间之后,总结如下,
首先看下整合后的目录结构
之后我们看下具体的教程步骤
编译前端工程
使用下面命令编译vue工程
npm run build
编译后文件目录如下
拷贝文件到springboot目录
将static下是css、fonts、img、js拷贝到springboot项目的/resources/static目录下
将index.html文件拷贝到springboot项目的/resources/templates目录下
新增IndexController
@Controller@RequestMapping("")public class IndexController { @RequestMapping("/index") public String index() { return "index"; }}
此controller的作用是在访问项目的/index路劲时,能够跳转到index.html
新增静态资源映射
@Configurationpublic class MvcConfig extends WebMvcConfigurationSupport { @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); }}
这样就能解决静态资源无法访问的问题
启动springboot项目
在上述步骤都完成之后,启动springboot项目。以本地为例,浏览器访问http://localhost:8080/index即可