如何把vuejs打包出来的文件整合到springboot里


Posted in Javascript onJuly 26, 2018

这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快。

一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快。

好吧,以上都是听说。。。应该。。。实际嘛?。。。

废话不多讲,马上搞起。

这里第一句要说的是,目前这个方式我认为只支持#这个方式的路由,如果改成了html5的mode: 'history',应该是不支持的。

开始准备:

注意,我的springboot用的视图模板是thymeleaf,静态文件夹路径默认是resources/static/,我们目的就是要把dist这个打包好的文件夹,整个放进去这里。

1.修改vuejs的config/index.js,在里面找到assetsPublicPath,改为/dist/,记住,是build:{}这里的,不是上面dev:{}的。

如何把vuejs打包出来的文件整合到springboot里

2.执行npm run build,会出现一个dist文件夹在vuejs项目目录里。

3.把这个dist文件夹copy到springboot的resources/static/,记住,是整个dist连文件夹一起copy过来。

OK,搞掂。就是这么简单。

访问localhost/dist/index.html/#/就可以

PS:本人对webpack不熟悉,按理,只要修改上图中的assetsRoot,可以直接build到最终路径,不用手动copy那么麻烦

总结

以上所述是小编给大家介绍的如何把vuejs打包出来的文件整合到springboot里,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
web前端开发也需要日志
Dec 09 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 #Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 #Javascript
详解ECMAScript typeof用法
Jul 25 #Javascript
微信小程序动态生成二维码的实现代码
Jul 25 #Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 #Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 #Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
You might like
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
详解python基础之while循环及if判断
2017/08/24 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Linux下python制作名片示例
2018/07/20 Python
详解Python 正则表达式模块
2018/11/05 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
自主招生自荐信
2013/12/08 职场文书
学历公证书范本
2014/04/09 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android