如何把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 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
理解Javascript的call、apply
Dec 16 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 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设置session值和cookies的学习示例
2014/03/21 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
java直接调用python脚本的例子
2014/02/16 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python获取代码运行时间的实例代码
2018/06/11 Python
NumPy 数组使用大全
2019/04/25 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
专科生就业求职信
2014/06/22 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
详解CocosCreator项目结构机制
2021/04/14 Javascript
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Python anaconda安装库命令详解
2021/10/16 Python