如何把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获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery中radio checked问题
2015/03/16 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python实现发送email的几种常用方法
2014/08/18 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
python 安装impala包步骤
2020/03/28 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
办公室内勤岗位职责范本
2013/12/09 职场文书
会计学生自我鉴定
2014/02/06 职场文书
理发店策划方案
2014/06/05 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
倡议书的写法
2014/08/30 职场文书
2014年个人总结范文
2015/03/09 职场文书
技术员岗位职责范本
2015/04/11 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
python开发制作好看的时钟效果
2022/05/02 Python