如何把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 限制输入脚本大全
Nov 03 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JavaScript实现显示和隐藏图片
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
提升PHP执行速度全攻略
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP代码优化技巧小结
2015/09/29 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
js实现表格数据搜索
2020/08/09 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python定时器线程池原理详解
2020/02/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
关于期中考试的反思
2014/02/02 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL