如何把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 (三) 管理jQuery包装集
Feb 23 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
vue时间格式化实例代码
Jun 13 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
JavaScript小技巧带你提升你的代码技能
Sep 15 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php常用数学函数汇总
2014/11/21 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
载入进度条 效果
2006/07/08 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
django ORM之values和annotate使用详解
2020/05/19 Python
详细分析Python collections工具库
2020/07/16 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
资深地理教师自我评价
2013/09/21 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
校车安全责任书
2014/08/25 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
神龙架导游词
2015/02/11 职场文书
教师自荐信范文
2015/03/06 职场文书
红白喜事主持词
2015/07/06 职场文书
学校教师培训工作总结
2015/10/14 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
vue实现滑动解锁功能
2022/03/03 Vue.js