文档章节

springboot整合vue小试牛刀

go4it
 go4it
发布于 09/24 16:55
字数 383
阅读 27
收藏 20

本文主要研究一下如何在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

© 著作权归作者所有

共有 人打赏支持
go4it
粉丝 67
博文 760
码字总数 564282
作品 0
深圳
解决SpringBoot获取不到PUT方式提交的参数的问题

最近开发的项目中,使用了采用put方式更新数据记录,但是当和前端结合时,发现无法通过@NotBlank的验证器验证。一开始以为是前端同学的参数名称设置的不对,但是查阅资料后发现是SpringBoot配...

muzi1994
07/09
0
0
1. 搭个框架 | 重构ActiveMQ Web Console

GITHUB:https://github.com/CadMeanM/spring-boot-learnning/tree/spring-demo 最近在自学Springboot,由于其轻量级的web开发特性,让我萌生了重新开始构建ActiveMQ Web Console的想法。记得...

MisterCH
10/01
0
0
spring boot在intellij idea中 html修改后未生效

环境:spring boot2.0.3 jdk1.8 intellij idea 2017.3.5/2018.2 问题:在static写html代码 修改后刷新网页无法生效。 注:已试过加入spring-boot-devtools,配置过build project automatical...

码农N号
07/30
0
0
如何在本地部署vue+springboot前后端分离应用

今天想在windows本地搭建一个服务器跑整个vue+springboot项目,但始终访问不到后端接口,网上介绍这方面的博客也很少,现在我将我的搭建过程与大家分享一下。 我们知道,在平时的开发过程中,...

为了美好的明天
05/14
0
0
Spring Boot入门资料整理

Spring Boot 初识 SpringBoot前世今生 本文主要讲述spring boot的由来,即其它诞生的背景,初衷,现状,及对未来的展望。 Spring Boot参考指南中文版--Chapter1.Spring Boot中文文档 本节提供...

小致dad
2017/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
6
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
14
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部