如何把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 处理 URL 的两个函数代码
Aug 13 Javascript
js的with语句使用方法
Sep 21 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
关于js类的定义
2011/06/28 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现socket端口重定向示例
2014/02/10 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Django URL参数Template反向解析
2020/11/24 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
便利店的创业计划书
2014/01/15 职场文书
工作过失检讨书
2014/02/23 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
医者仁心观后感
2015/06/17 职场文书
Python闭包的定义和使用方法
2022/04/11 Python