服务器之家

服务器之家 > 正文

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

时间:2021-06-01 14:09     来源/作者:codecraft

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

maven

?
1
2
3
4
<dependency>
  <groupid>org.springframework.boot</groupid>
  <artifactid>spring-boot-starter-web</artifactid>
</dependency>

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

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

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

plugin

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://segmentfault.com/a/1190000016501490

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部