如何把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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
深入学习JavaScript对象
Oct 13 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
jquery图片放大镜效果
Jun 23 jQuery
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python线程池threadpool使用篇
2018/04/27 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
社区党务工作总结2015
2015/05/19 职场文书
小时代观后感
2015/06/10 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
微信小程序调用python模型
2022/04/21 Python