如何把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中的end()使用方法
Jul 10 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
js+css3实现旋转效果
Jan 20 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 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
mysql时区问题
2008/03/26 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php返回json数据函数实例
2014/10/09 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
js实现转动骰子模型
2019/10/24 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
详解vue路由
2020/08/05 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
详解python中的异常和文件读写
2021/01/03 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
应届医学毕业生求职信分享
2013/12/02 职场文书
公司前台辞职报告
2014/01/19 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
公司授权委托书
2014/04/04 职场文书
三方协议书范本
2014/04/22 职场文书
2014年宣传工作总结
2014/11/18 职场文书
职称评定个人总结
2015/03/05 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
python前后端自定义分页器
2022/04/13 Python