第一步,使用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";}
}
运行项目
输入端口并进行访问!