Springboot和vue整合

最近要把一个spirngboot项目和vue整合一下。于是百度了一下，大部分的教程都是build前端vue项目，然后把生成的dist目录下的文件拷贝到resources下的static下即可，但是按照以上教程实际上项目启动后无法正常访问。在摸索了一段时间之后，总结如下，
首先看下整合后的目录结构

之后我们看下具体的教程步骤

编译前端工程

修改config/index.js中的build模块配置

build: {
   // Template for index.html，修改这里，其他的不变
   index: path.resolve(__dirname, '../dist/templates/index.html'),
   // Paths
   ssetsRoot: path.resolve(__dirname, '../dist'),
   ...
}

使用下面命令编译vue工程

npm run build

编译后文件目录如下

拷贝文件到springboot目录

将static下是css、fonts、img、js拷贝到springboot项目的/resources/static目录下
将index.html文件拷贝到springboot项目的/resources/templates目录下

新增Maven依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

新增IndexController

@Controller
@RequestMapping("")
public class IndexController {
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
}

此controller的作用是在访问项目的/index路劲时，能够跳转到index.html

新增静态资源映射

@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

这样就能解决静态资源无法访问的问题

启动springboot项目

在上述步骤都完成之后，启动springboot项目。以本地为例，浏览器访问http://localhost:8080/index即可