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

導入依賴

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

在resources目錄下建立static文件夾和templates文件夾

在yml中配置thymeleaf

spring:# 模板引擎thymeleaf:mode: HTML5encoding: utf-8# 禁用緩存cache: false

在配置中打開訪問靜態文件的權限

public class ResourceConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");}
}

將vue項目打包

npm run build

打包后中的靜態文件放入static文件夾中，將index.html放入templates文件夾中

在controller中寫路由

讓其跳轉index.html頁面

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

運行項目

輸入端口并進行訪問！