springboot整合vue项目(小试牛刀)

序

本文主要研究一下如何在springboot工程整合vue

maven

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

新建springboot的web工程，默认会在resources目录下生成static以及templates文件夹

templates文件用于存放后端渲染的模板，这里我们采用前后端分离的方式，因而该文件夹就没有用了

static文件夹就是存放静态文件的地方

plugin

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
      <!-- mvn process-resources -->
      <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <executions>
          <execution>
            <id>copy Vue.js frontend content</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>src/main/resources/static</outputDirectory>
              <overwrite>true</overwrite>
              <resources>
                <resource>
                  <directory>${basedir}/vue-demo/dist</directory>
                  <includes>
                    <include>static/</include>
                    <include>index.html</include>
                  </includes>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>

这里我们使用了maven-resources-plugin插件，将vue工程npm run build之后的dist文件夹下的文件拷贝到static目录下

这里我们假设vue工程名为vue-demo，在这个springboot工程的根目录下

对于vue工程，首先执行npm run build生成静态文件，之后对maven工程执行mvn process-resources，就可以一键拷贝

小结

在springboot工程整合vue的话，将静态文件拷贝到src/main/resources/static目录下即可，这样就可以在springboot工程打开静态文件了，对api的请求也无需再转发，也没有跨域问题，比较适合管理后台前端资源的整合。

doc

A Lovely Spring View: Spring Boot & Vue.js

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • 如何把vuejs打包出来的文件整合到springboot里

    如何把vuejs打包出来的文件整合到springboot里

    这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快. 一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快. 好吧,以上都是听说...应该...实际嘛?... 废话不多讲,马上搞起. 这里第一句要说的是,目前这个方式我认为只支持#这个方式的路由,如果改成了html5的mode: 'history',应该是不支持的. 开始准备: 注意,我的springboot用的视图模板是thymeleaf,静态文件夹路径默认是resou

  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

  • 在vue中使用SockJS实现webSocket通信的过程

    最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: socksjs •客户端和服务器端api尽可能简洁,尽量靠近websocket api •支持服务端扩展和负载均衡技术 •传输层应该全面支持跨域通信 •如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式 •尽可能快地建立连接 •客户端只是纯

  • websocket在springboot+vue中的使用教程

    1.websocket在springboot中的一种实现 在java后台中,websocket是作为一种服务端配置,其配置如下 @Configuration public class WebSocketConfig { @Bean(name="serverEndpointExporter") public ServerEndpointExporter getServerEndpointExporterBean(){ return new ServerEndpointExporter()

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • springboot整合vue项目(小试牛刀)

    序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 新建springboot的web工程,默认会在resources目录下生成static以及templates文件夹 temp

  • 使用SpringBoot整合ssm项目的实例详解

    SpringBoot是什么? Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程. Spring Boot 现在已经成为 Java 开发领域的一颗璀璨明珠,它本身是包容万象的,可以跟各种技术集成.成为 SpringBoot 全家桶,成为一把万能钥匙. SpringBoot的特点 1.创建独立的 Spring 应用程序 2.嵌入的 Tomcat ,无需部署 WAR 文件 3.简化 Maven 配置 4.自动配置 Spr

  • springboot整合vue实现上传下载文件

    springboot整合vue实现上传下载文件

    springboot整合vue实现上传下载文件,供大家参考,具体内容如下 环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件 设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l

  • docker部署springboot和vue项目的实现步骤

    docker部署springboot和vue项目的实现步骤

    A. docker 部署 springboot项目 一.springboot项目编译打包 二.在项目根目录创建Dockerfile文件 FROM openjdk:8-jdk-alpine VOLUME /tmp ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar RUN sh -c 'touch /demo.jar' ENTRYPOINT ["sh", "-c", "java $JAVA_OPTS -Djava.se

  • SpringBoot整合Vue实现微信扫码支付以及微信退款功能详解

    直接上代码,在order模块添加依赖 <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version> </dependency> 在配置类添加申请的商家号信息 #关联的公众号appid weixin.pay.appid=wxXXXXXXX #商户号 weixi

  • Java SpringBoot整合shiro-spring-boot-starterqi项目报错解决

    Java SpringBoot整合shiro-spring-boot-starterqi项目报错解决

    目录 1.项目启动时报错如下 2.原因分析 3.测试@ConditionalOnMissingBean注解 1.项目启动时报错如下 Description: The bean 'securityManager', defined in class path resource [org/apache/shiro/spring/config/web/autoconfigure/ShiroWebAutoConfiguration.class], could not be registered. A b

  • Springboot项目与vue项目整合打包的实现方式

    Springboot项目与vue项目整合打包的实现方式

    我的环境 * JDK 1.8  * maven 3.6.0  * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

  • SpringBoot整合Swagger和Actuator的使用教程详解

    前言 本篇文章主要介绍的是SpringBoot整合Swagger(API文档生成框架)和SpringBoot整合Actuator(项目监控)使用教程. SpringBoot整合Swagger 说明:如果想直接获取工程那么可以直接跳到底部,通过链接下载工程代码. Swagger 介绍 Swagger 是一套基于 OpenAPI 规范构建的开源工具,可以帮助我们设计.构建.记录以及使用 Rest API.Swagger 主要包含了以下三个部分: Swagger Editor:基于浏览器的编辑器,我们

  • 你不知道的SpringBoot与Vue部署解决方案

    前言 前段时间公司外网部署的演示环境全部转到内网环境中去,所有对外演示的环境都需要申请外网映射才能访问某个服务.我用一个外网地址 www.a.com 映射到一个内网地址 http://ip:port ,然后在这个地址 http://ip:port 用 nginx 做代理转发到各个组的项目 http://ipn:portn 上去,其中也遇到一些静态资源 404,主要是是解决这个 404 问题. 最近又做了一个项目,考虑到用户的体验,减少部署的复杂性,我想了一个办法用 SpringBoot 做 we

  • SpringBoot整合tkMapper的方法

    SpringBoot整合tkMapper的方法

    SpringBoot整合tkMapper 项目使用SpringBoot2.0,H2数据库,使用了 Lombok 简化代码:本人是刚入门的菜鸟,下面是本人使用SpringBoot整合tkMapper的一个小demo,记录下来本人在此处踩得坑,有需要修正的地方欢迎各路大神.大佬指导,小弟谦虚受教. 1 搭建一个SpringBoot的项目,怎么搭建网上教程一大堆,这里就不描述了直接进入正题,首先先看一下整体的项目结构 2 pom文件引入依赖(注意依赖冲突) <dependencies> <de

随机推荐