如何把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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
详解Vue之计算属性
Jun 20 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获取一个变量的名字的方法
2014/09/05 PHP
简单JS代码压缩器
2006/10/12 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
在django中自定义字段Field详解
2019/12/03 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
教育专业自荐书范文
2013/12/17 职场文书
志愿者个人总结
2015/03/03 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
初中毕业生感言
2015/07/31 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书