如何把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 window对象属性整理
Oct 24 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
原生JS实现烟花效果
Mar 10 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
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
yii框架源码分析之创建controller代码
2011/06/28 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python中的类学习笔记
2014/09/23 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python如何访问字符串中的值
2020/02/09 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
Java程序员面试题
2013/07/15 面试题
网络教育自我鉴定
2014/02/04 职场文书
涨价通知
2015/04/23 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
《法国号》教学反思
2016/02/22 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL