SpringBoot集成vue的开发解决方案
最近由于工作要求：前端采用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";
}
这种方案非常有利于后端开发人员做更多的进一步操作，比如：给每个页面增加页面权限等。
注意：该方案目前适用于前端页面整合到后端的项目工程。
到此这篇关于SpringBoot集成vue的开发解决方案的文章就介绍到这了,更多相关SpringBoot集成vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
java.net.ConnectException: Connection refused问题解决办法
这篇文章主要介绍了java.net.ConnectException: Connection refused问题解决办法的相关资料,需要的朋友可以参考下2016-12-12
继承就是可以直接使用前辈的属性和方法。自然界如果没有继承，那一切都是处于混沌状态。多态是同一个行为具有多个不同表现形式或形态的能力。多态就是同一个接口，使用不同的实例而执行不同操作2022-04-04
这篇文章主要介绍了如何通过Java代码实现KMP算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Java多线程编程中线程锁与读写锁的使用示例,锁是控制程序多线程并发的重要手段,需要的朋友可以参考下2016-04-04
TypeHandler被称作类型处理器，MyBatis在设置预处理语句中的参数或从结果集中取出一个值时，都会用类型处理器将Java对象转化为数据库支持的类型或者将获取到数据库值以合适的方式转换成Java类型，感兴趣的同学可以参考下文2023-05-05
这篇文章主要介绍了Java Spring Event事件监听详情解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
本文主要介绍了java中的重载和重写的区别。具有一定的参考价值，下面跟着小编一起来看下吧，希望能够给你带来帮助2021-11-11
SpringBoot中@KafkaListener使用${}动态指定topic问题
在SpringKafka中,使用${}引用Spring属性配置,可以在不同环境中重新配置topic名称,而无需修改代码,在application.properties或application.yml中定义topic名称,并在代码中使用${}引用2024-12-12
Java实现的properties文件动态修改并自动保存工具类
这篇文章主要介绍了Java实现的properties文件动态修改并自动保存工具类,可实现针对properties配置文件的相关修改与保存功能,需要的朋友可以参考下2017-11-11
这篇文章我们来看一篇关于Java8新特性之泛型的类型推导，希望这篇文章能够让各位深入到了解到关于Java8新特性之泛型的类型用法，有需要的朋友们下面来一起看看吧。2016-09-09
最新评论