如何把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 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
ionic3 懒加载
Aug 16 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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
phpmyadmin操作流程
2006/10/09 PHP
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
网络技术支持面试题
2013/04/22 面试题
音乐教师求职信
2014/06/28 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
党员作风建设自查报告
2014/10/23 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
从事会计工作年限证明
2015/06/23 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang