将vue项目打包后,与springboot项目整合。

    第一步,使用springboot中的thymeleaf模板引擎

    导入依赖

    1. <!-- thymeleaf 模板 -->
    2. <dependency>
    3. <groupId>org.springframework.boot</groupId>
    4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
    5. </dependency>

    在resources目录下建立static文件夹和templates文件夹

    springboot整合vue,将vue项目整合到springboot项目中 - 图1

    在yml中配置thymeleaf

    1. spring:
    2. # 模板引擎
    3. thymeleaf:
    4. mode: HTML5
    5. encoding: utf-8
    6. # 禁用缓存
    7. cache: false

    在配置中打开访问静态文件的权限

    1. public class ResourceConfig implements WebMvcConfigurer {
    2. @Override
    3. public void addResourceHandlers(ResourceHandlerRegistry registry) {
    4. registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    5. }
    6. }

    第二步:将vue项目打包后中的静态文件放入static文件夹中,将index.html放入templates文件夹中

    springboot整合vue,将vue项目整合到springboot项目中 - 图2

    第三步:在controller中写路由,让其跳转index.html页面

    1. @Controller
    2. @CrossOrigin
    3. public class IndexController {
    4. @GetMapping("/")
    5. public String index(){
    6. return "index";
    7. }
    8. }