如何把vuejs打包出来的文件整合到springboot里

这个需求不知道是不是合适，因为静态的vuejs项目，用nginx部署，听说很快。

一般有这个需求的，都是用tomcat来部署java项目，tomcat转发静态vuejs，应该不会很快。

好吧，以上都是听说。。。应该。。。实际嘛？。。。

废话不多讲，马上搞起。

这里第一句要说的是，目前这个方式我认为只支持#这个方式的路由，如果改成了html5的mode: 'history'，应该是不支持的。

开始准备：

注意，我的springboot用的视图模板是thymeleaf，静态文件夹路径默认是resources/static/，我们目的就是要把dist这个打包好的文件夹，整个放进去这里。

1.修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/dist/,记住，是build:{}这里的，不是上面dev:{}的。

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里，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vuejs项目打包之后的首屏加载优化及打包之后出现的问题

    一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样: 1:打开webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'vuex': 'Vuex', 'vue-router': 'VueRout

  • 如何把vuejs打包出来的文件整合到springboot里

    如何把vuejs打包出来的文件整合到springboot里

    这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快. 一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快. 好吧,以上都是听说...应该...实际嘛?... 废话不多讲,马上搞起. 这里第一句要说的是,目前这个方式我认为只支持#这个方式的路由,如果改成了html5的mode: 'history',应该是不支持的. 开始准备: 注意,我的springboot用的视图模板是thymeleaf,静态文件夹路径默认是resou

  • 解决java项目jar打包后读取文件失败的问题

    解决java项目jar打包后读取文件失败的问题

    java项目jar打包后读取文件失败 在本地项目读取文件时 this.getClass().getClassLoader().getResource("").getPath()+fileName this.getClass().getResource("/filename").getPath() 都是可以成功的 但是jar打包后上面方式读取文件时 会变成 jar!filename 这样的形式去读取文件,这样是读取不到文件的 可以使用 Test.class.getRe

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • webpack打包并将文件加载到指定的位置方法

    使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这 同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了. 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包, 并且按照我们自己设定的存放路径进行存放) 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的: entry: { main: path.resolve(__dirname,'src/index.js'),

  • 将Python脚本打包成exe文件

    将Python脚本打包成exe文件

    目录 1.安装依赖 2.整合资源 3.修改脚本并测试 4.准备图标(可略过) 5.pyinstaller打包 6.结论 总结 相信很多朋友在用Python写完代码之后都迫不及待的想发给对象交流(装X),但是发源码又要求对方有对应的解释器,一般是行不通的,所以我们要把源码打包成可执行的.exe文件,方便广大用户使用. 1.安装依赖 打开命令行[开始->搜索->cmd] pip install pyinstaller 等待安装成功 2.整合资源 将代码所需要加载的文件资源[图片.因为.文档等]整合

  • vue打包生成的文件的js文件过大的优化方式

    vue打包生成的文件的js文件过大的优化方式

    目录 vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后 项目打包之后js文件太大问题 问题描述 1.使用cdn引入不怎么改变的第三方库 2.使用vue的懒加载 3.服务器和前端配置开启压缩 vue打包生成的js文件过大优化 1.组件按需加载 现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可 2.去掉生成map文件 打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件 (1)c

  • 把Java程序打包成jar文件包并执行的方法

    把Java程序打包成jar文件包并执行的方法

    本文介绍了把Java程序打包成jar文件包并执行的方法,分享给大家,具体如下: 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project 打包步骤: 1.在项目上,右键,选择Export. 2.进入到下图界面,选择Java 下面的JAR file 3.选择项目,确认必要的文件是否选中,选择保存jar文件包的路径,如下图 4.完成步骤3之后,点击Next,进入如下图界面: 5.直接点Next,进入下面的界面

  • linux中tar打包指定路径文件的实现方法

    压缩: tar czvf /data/backup/test.tar.gz /data/a/b/directory 解压: cd /data/test tar xzvf /data/backup/test.tar.gz 问题是,解压后的文件,在/data/test/data/a/b/directory里面 要想解压在当前目录路径. 这样写就可以解决了 tar czvf /data/backup/test.tar.gz /data/a/b/directory 改成 tar czvf /data/b

  • php将文件夹打包成zip文件的简单实现方法

    示例如下: function addFileToZip($path,$zip){ $handler=opendir($path); //打开当前文件夹由$path指定. while(($filename=readdir($handler))!==false){ if($filename != "." && $filename != ".."){//文件夹文件名字为'.'和'..',不要对他们进行操作 if(is_dir($path."/&q

  • 用asp实现把文件打包成Xml文件包，带解包的ASP工具附下载

    把文件打包成Xml文件包,带解包的ASP工具! 把网站源码全部打包到Xml文件里面,生成 updata.xml 文件,把xml文件上传到空间里面 然后通过 install.asp文件将文件全部释放出来. 就和z-blog的 自动安装包一样的功能呵呵. 代码是落伍的一位兄弟写的,不过代码好像有错误,这个是我参考他的 修改过了,可以正常运行!~~ 此代码可以应用到 asp程序的 自动升级服务上面.具体怎么来实现,欢迎探讨!~~ 就在下面回帖探讨!~~~ 不用设定打包目录版,需要设定打包目录版 这两个

随机推荐