Vue打包部署到Spring Boot

前端使用Vue，后台使用Spring Boot。使用Vue需先使用webpack打包项目，再将打包生成后的静态资源文件拷贝到Spring Boot中去整合（这里只是做本地整合测试用，实际上不会这样做部署）。

1 文件目录结构

打包的命令很简单，在项目根目录下运行：

npm run build

1.1 打包后的文件目录结构

打包完成后，会在根目录下生成dist文件夹，这个文件夹就是打包之后的静态资源（html、js、css等）。默认打包后生成的文件目录结构如下：

├── dist
|   ├── static
│   |   ├── css
|   |   ├── fonts
|   |   ├── img
|   |   ├── js
|   ├── favicon.ico
|   ├── index.html

但很多时候，默认的打包路径并不能匹配我们的项目文件结构，需要通过修改配置文件，配置静态资源的打包路径。默认配置生成的静态资源文件引用路径如下：

<script src=/static/js/app.8d6eecee.js></script>

1.2 后台的文件目录结构

而我的Spring Boot项目的静态资源文件目录结构是这样的：

├── static
|   ├── assert
│   |   ├── css
|   |   ├── fonts
|   |   ├── img
|   |   ├── js
|   ├── favicon.ico
|   ├── index.html

我们希望静态资源引用的路径是这样：

<script src=/assert/js/app.8d6eecee.js></script>

怎么样才能做到呢？

2 修改webpack配置

找到vue项目config文件夹下的index.js文件，找到build属性：

module.exports = {dev: {// ....},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',/*** You can set by youself according to actual condition* You will need to set this if you plan to deploy your site under a sub path,* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,* then assetsPublicPath should be set to "/bar/".* In most cases please use '/' !!!*/assetsPublicPath: '/',// ...}

需要配置的就是build中的几个字段：

index: path.resolve(__dirname, ‘…/dist/index.html’)
- index.html存放路径
assetsRoot: path.resolve(__dirname, ‘…/dist’)
- 静态资源文件存放的根目录
assetsSubDirectory: ‘static’
- 静态资源文件所存放的子目录，注意与根目录区分
assetsPublicPath
- 静态资源部署后的公共路径，看官方注释

所以按照需求，我们只需要把静态资源文件存放的子目录更改一下即可：

assetsSubDirectory: 'assert',

3 修改Spring Boot配置

如果使用Spring Boot默认的静态资源路径映射配置，即映射路径为：

classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

则不需要我们再进行修改了。

但开放这么多目录不方便我们做权限访问控制，我通常只开放/static这一个路径，这时候访问静态资源都必须要加上/static路径前缀，否则访问不到资源，即：

<script src=/static/assert/js/app.8d6eecee.js></script>

这样的话，就与我们webpack打包的路径对不上了，所以需要做自定义静态资源映射，即在application.yml中做如下配置：

spring:mvc:static-path-pattern: /**resources:static-locations: classpath:/static/

4 最后

将Vue项目下的dist文件夹中的所有文件拷贝到Spring Boot中的static文件夹中就可以了！访问localhost即可看到我们的页面。

5 参考链接

Spring Boot 系列（四）静态资源处理

webpack打包后的静态资源问题

Vue整合到Spring Boot相关推荐

如何免安装服务器将 React 整合进 Spring Boot
如何免安装服务器将 React 整合进 Spring Boot 下载 Spring Boot 官方 demo 下载 React 官方 demo 开始整合使用 Spring MVC 控制器导向 Rea ...
spring Boot 2 基础篇。内含整合一个spring boot 的小案例
目录 springBoot2基础篇前言与开发环境一.快速创建Boot项目 1.使用spring提供的快速构建 2.基于maven的手动构建 3.在Idea中隐藏指定文件/文件夹二.SpringB ...
使用VUE(uniapp)和Spring boot做的小游戏远古帝国
1.游戏介绍代码已经从github迁移到gitee 欢迎大家start,本游戏ui和游戏思路完全参考原版游戏远古帝国,但是代码完全自己开发,和原本没有任何关系,本游戏永远不会盈利,做这个游戏只是处 ...
Vue + Element UI + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十)问题管理页面
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
VUE+Spring Boot整合MyBatis实现前后端分离项目壁纸网站
目录前言一.项目运行二.环境需要三.技术栈四.项目说明五.后端代码前言每次换桌面,壁纸总是不好找,搜索图片得不到好的索引与反馈,很难找到自己喜欢的壁纸,而壁纸网站可以免去我们去寻找壁纸 ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
Spring Boot底层原理详解及整合
Spring Boot框架通过Spring Boot 可以构建一个基于Spring框架的Java Application,简化配置,自动装配,开箱即用 JavaConfiguration用Java类 ...
spring boot 学习(二)spring boot 框架整合 thymeleaf
spring boot 框架整合 thymeleaf spring boot 的官方文档中建议开发者使用模板引擎,避免使用 JSP.因为若一定要使用 JSP 将无法使用. 注意:本文主要参考学习了大神 ...
Spring Boot+Vue从零开始搭建系统（一）：项目前端_Vuejs环境搭建
前言博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring ...

Vue整合到Spring Boot

文章目录