SpringBoot集成vue的开发解决方案
作者:sunct 发布时间:2023-11-24 20:58:10
最近由于工作要求:前端采用vue开发,后端采用springboot开发,前后端分离开发,最后前端页面又整合到后端来。经历多次采坑,总结以下方案:
vue build后的文件部署到springboot目录
vue打包后,会生成dist目录
springboot静态资源目录如下:
SpringBoot处理静态资源和页面,设置如下:
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
super.addResourceHandlers(registry);
}
页面模板设置,如下:
#页面模板设置
spring.thymeleaf.option=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
部署方案:
dist的index.html 直接放在templates目录下
dist的css、fonts、img、js 直接放在static目录下
vue打包后vendor文件过大的优化方案
vue使用vue-cli打包后,vendor就将vue.js其他引用的包一起压缩打包进去,导致vendor文件超过1M,影响页面加载速度
本项目使用了vue、vue-router、iview、axios、echarts等
(1)使用vue、vue-router、iview、axios、echarts等cnd引用
在index.html文件中,增加:
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/iview@3.4.0/dist/iview.min.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/echarts@4.2.1/dist/echarts.min.js"></script>
(2)打包时,排除vue、vue-router、iview、axios、echarts等打包
在webpack.base.conf.js文件中,module.exports={…} 方法中添加
module.exports = {
...
externals:{
'vue':'Vue',
'axios':'axios',
'vue-router':'VueRouter',
'iview':'iview',
'echarts':'echarts',
},
...
}
这里有注意的是:命名问题
比如:vue-router的在https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js中默认采用VueRouter,所以在import vue-router一定要使用VueRouter,而不能使用其他别名。
vue默认别名是Vue
axios默认别名是axios
vue-router默认别名是VueRouter
iview默认别名是iview
echarts默认别名是echarts
例子:
import Vue from 'vue'
import VueRouter from 'vue-router'
import iview from 'iview'
import echarts from 'echarts'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
...
})
(3)vue-router的路由页面设置为按需加载
export default new VueRouter({
mode: 'history',
routes: [
//页面1
{
path: '/Page1',
name: 'page1',
component: () => import('@/views/Page1.vue')
},
//页面2
{
path: '/Page2',
name: 'page2',
component: () => import('@/views/Page2.vue')
}
]
});
(4)重新打包后vendor.js文件就小了,可以小到1k哦
vue-router使用了history模式,vue其实做的是单页面应用,但是效果看上去是多个不同页面,问题来了,部署到线上环境后,该如何配置?
百度上有很多处理方案,比如:使用errorPage方式处理,nginx配置等,这些问题比较繁琐,而且在部署过程中,一堆问题。
经过多次尝试,发现有一个最简单方法,Controller直接url路径配置到index.html即可,而且轻松解决history模式带来的后端问题,如下:
@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page1")
public String page1() {
return "index";
}
@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page2")
public String page2() {
return "index";
}
这种方案非常有利于后端开发人员做更多的进一步操作,比如:给每个页面增加页面权限等。
注意:该方案目前适用于前端页面整合到后端的项目工程。
来源:https://blog.csdn.net/sunct/article/details/91047721
猜你喜欢
- 本文实例为大家分享了java利用数组随机抽取幸运观众的具体代码,供大家参考,具体内容如下思想:首先将所有观众姓名生成数组,然后获取数组元素的
- Java环境配置原理详解1.Jdk安装目录文件说明:一般jdk安装目录及路径 \Java\jdk1.7.0_79\lib,里面主要包含以下文
- java 中遍历取值异常(Hashtable Enumerator)解决办法用迭代器取值时抛出的异常:java.util.NoSuchEle
- 前言Android提供了很多种保存应用程序数据的方法。其中一种就是用SharedPreferences对象来保存我们私有的键值(key-va
- 技术场景在日常的开发、测试或运维的过程中,经常存在这样的场景,开发人员在代码中使用日志工具(log4j、slf4j)记录日志,比如请求ID、
- 背景分析在项目的开发中,不管是对底层的数据逻辑操作过程,还是业务逻辑的处理过程,还是控制逻辑的处理过程,都不可避免会遇到各种可预知的、不可预
- 本文实例为大家分享了java简单实现斗地主发牌的具体代码,供大家参考,具体内容如下问题:参考斗地主的游戏规则,完成一个发牌的功能(54张牌,
- Java Collection API提供了一些列的类和接口来帮助我们存储和管理对象集合。其实Java中的集合工作起来像是一个数组,不过集合
- 概述从今天开始, 小白我将带大家开启 Jave 数据结构 & 算法的新篇章.循环队列循环队列 (Circular Queue) 是一
- 1.在res上面右键->New->Android resource directory2.点击之后,出现下图Resource t
- 前言:好久没有写博客,最近一年感觉真是好忙,各种做不完的工作。相信很多上班族都会有这种感觉。最近对NFC进行写卡操作,需要计算一个校验位。一
- spring的自动装配功能的定义:无须在Spring配置文件中描述javaBean之间的依赖关系(如配置<property>、&
- 1.概述数据库开发一直是JAVA开发的核心之一,作为现在JAVA EE的基石框架,Spring Boot自身携带了一个JDBCTemplat
- synchronized 和 Reentrantlock多线程编程中,当代码需要同步时我们会用到锁。Java为我们提供了内置锁(synchr
- 前言Feign是Netflix开源的声明式HTTP客户端,致力于让编写http client更加简单,Feign可以通过声明接口自动构造请求
- 本文实例为大家分享了Java Swing实现扫雷源码的具体代码,供大家参考,具体内容如下先来看下效果运行时只需要创建一个GameWindow
- 概念优先级队列是一种先进先出(FIFO)的数据结构,与队列不同的是,操作的数据带有优先级,通俗的讲就是可以比较大小,在出队列的时候往往需要优
- 1.返回String“长度”方法你如何确定给定String的长度?java提供了一种称为“length()”的方法。将它用于您需要查找Str
- 相关知识:Java中三种简单注解介绍和代码实例一、作用用 @Deprecated注解的程序元素,不鼓励程序员使用这样的元素,通常是因为它很危
- 一、定义实体类Person,封装生成的数据package net.dc.test;public class Person { private