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

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

导入依赖

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

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

在yml中配置thymeleaf

spring:
  # 模板引擎
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    # 禁用缓存
    cache: false

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

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

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

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

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

GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐