如何把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 封装Ajax传递的数据代码
Jun 05 Javascript
Prototype String对象 学习
Jul 19 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
JS出现失效的情况总结
Jan 20 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php实用代码片段整理
2016/11/12 PHP
JS中的异常处理方法分享
2013/12/22 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
《风筝》教学反思
2014/04/10 职场文书
2014中考励志标语
2014/06/05 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Java spring单点登录系统
2021/09/04 Java/Android
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android