如何把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 相关文章推荐
JS将秒换成时分秒实现代码
Sep 03 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
Angular简单验证功能示例
Dec 22 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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执行sql语句的写法
2009/03/10 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python flask解析json数据不完整的解决方法
2019/05/26 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
keras实现多种分类网络的方式
2020/06/11 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
kfc实习自我鉴定
2013/12/14 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
银行办公室岗位职责
2014/03/10 职场文书
六一儿童节标语
2014/10/08 职场文书
2015年度女工工作总结
2015/10/22 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书