el-admin将前端打包到jar包

最新推荐文章于 2024-05-08 14:49:48 发布
最新推荐文章于 2024-05-08 14:49:48 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： el-admin 文章标签： vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43835492/article/details/121696446
版权

文章目录

el-admin将前端打包到jar包

项目本是前后端分离，但为了满足特别需求，需要将前端打进jar包，跟后端一起发布，所以有了这边博客。

一、改造前端

1.更改.env.production，改成对应的后端接口
在这里插入图片描述

VUE_APP_BASE_API  = 'http://47.99.209.106:18061'
VUE_APP_WS_API = 'ws://47.99.209.106:18061'

2.更改vue.config.js
在这里插入图片描述

publicPath: process.env.NODE_ENV === 'development' ? '/' : './',

3.更改router.js
在这里插入图片描述

mode: 'hash',

二、后端修改

1.这段代码可以先看看

代码如下（示例）：
在这里插入图片描述

2.添加META-INF/resources/

将前端打包好的dist放在下面
在这里插入图片描述

3.给SpringSecurityConfig添加图上四个

在这里插入图片描述

总结

修改结束，这里最终打jar包或war包都可以。
访问入口则是：ip+后端端口/dist/index.html,dist可以写成自己的项目名简写，注意改一下相应的目录名

Herr Z�
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
eladmin,项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue 的前后端分离的后台管理系统，项目采用分模块开发方式， 权限控制采用 RBAC，支持数据字典与数据权限管理，前端菜单支持动态路由.zip
10-11
eladmin,项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue 的前后端分离的后台管理系统，项目采用分模块开发方式， 权限控制采用 RBAC，支持数据字典与数据权限管理，前端菜单支持动态路由.zip
EL-ADMIN是一个非常火的java框架 , EL-ADMIN Flutter,EL-ADMIN APP
06-15
在EL-ADMIN官网看了介绍，框架使用了...EL-ADMIN这个框架在java非常火，后端和前端的技术非常先进，发现缺少一个原生APP，经过一段时间的研究，使用Flutter把EL-ADMIN原生的APP做出来 这里只是APP，可以安装在安卓手机
项目打包部署流程（前后端本地打包部署）
qq_45765384的博客
03-18 951
前后端本地打包部署运行
eladmin-mp 前后端分离项目搭建流程
最新发布
zdc8080的博客
05-08 249
eladmin-mp 框架搭建流程
WebJars简介 —— 前端资源的jar包形式
qq_42244304的博客
08-05 1030
WebJars简介 —— 前端资源的jar包形式（以后接触到再深入总结） 对于日常的web开发而言，像css、js、images、font等静态资源文件管理是非常的混乱的、比如jQuery、Bootstrap、Vue.js等，可能每个框架使用的版本都不一样、一不注意就会出现版本冲突或者重复添加的问题。所以找到了一个叫做WebJars的技术，下面我将介绍如何将静态资源打包成jar。 原本我们在进行web开发时，一般上都是讲静态资源文件放置在webapp目录下，在SpringBoot里面，一般是将资源文件放置在
记一次vue-cli前端项目打包到spring boot生成jar包，生成软件安装包的过程
qq_15054679的博客
06-03 3851
记一次vue-cli前端项目打包到spring boot生成jar包，生成软件安装包的过程1、vue打包之前的配置2、前后端合并3、生成jar包4、使用exe4j生成exe文件5、打开exe4j5、使用Inno Setup Compiler生成安装包6、exe4j和Inno Setup Compiler安装包下载7、参考 1、vue打包之前的配置 在工程的config目录下的index.js文件配...
springboot整合前端工程打成jar包
sinat_34302249的博客
02-27 727
将前端工程编译后放到resource/static 目录下。将springboot和前端页面打进一个jar包。
如何利用jar命令把前端代码打进jar包
太空眼睛的专栏
01-17 1977
前后端分离是目前主流的开发模式，部署的时候也是利用类似nginx实现前后端分离部署，前端代码由nginx直接托管，后端请求通过nginx转发到后端微服务。但在实施部署的时候，不同的客户会有不同的诉求，有些人觉得全部放在一个jar包里面部署的时候简单方便。
EL-ADMIN是一个非常火的java框架 , EL-ADMIN Flutter,EL-ADMIN APP 源码
06-15
EL-ADMIN这个框架在java非常火，后端和前端的技术非常先进，发现缺少一个原生APP，经过一段时间的研究，使用Flutter把EL-ADMIN原生的APP做出来 1）这是自己开发的源码 2）提供几个获取列表、明细的例子，其它完全...
javax.el-api-3.0.0.jar
04-09
springboot 打war部署到apache-tomcat-7.0.69中启动报错：java.lang.NoClassDefFoundError: javax/el/ELManager ... 下载javax.el-api-3.0.0.jar,放到 tomcat/lib包下可以解决，原来的el-api.jar版本较低
tomcat-embed-el-9.0.16.jar
01-08
tomcat-embed-el-9.0.16.jar
el-admin后台管理系统
08-14
el-admin后台管理系统是一个基于 Spring Boot 2.1.0 、 Spring boot Jpa、 Spring Security、redis、Vue的前后端分离的权限管理系统，项目采用分模块开发方式， 权限控制采用 RBAC（Role-Based Access Control，基于...
将java或javaweb项目打包为jar包或war包
热门推荐
gao_zhennan的博客
04-14 6万+
一、为什么打包？         关于此问题，网上众说纷纭。结合个人理解以及网上说法，打成jar包，方便别人使用。 如果别人运行java程序，不需要在寻找包含main方法的类去执行；如果别人使用jar包，直接在自己项目中导入jar包，而不是赋值一堆类文件。打成war包是真实生产化境，选择的web应用部署方式，网上说...
Spring Boot + React, 一个jar包让前后端一起跑
weixin_44115963的博客
10-16 1727
前后端一起发布
windows环境Dubbo-admin 安装 jar包方式
qq_42886373的博客
07-18 1521
Dubbo的安装方式： 1、打成war包使用tomcat来部署 2、使用springboot之后打成jar包直接运行。 第一种方式部署完成之后遇到404问题，使用的是github上dubbo地址下面的dubbo-admin，可能太古老，问题出在哪儿不知道。一堆没有的博客，解决不了。 马上采用第二种方式部署： 1、下载dubbo-admin https://github.com/apache/dubbo-admin/tree/master 下载master分支（新版本会有一些问题） dubbo从2.6开始
vue-element-admin 运行并且打包部署
祈澈菇凉
07-14 1万+
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。 推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：ht...
如何讲页面打入jar包中_WEB应用打成jar包全记录
weixin_35040154的博客
12-31 503
内容属原创，转载请注明出处题外由于项目的需求—不管是怎么产生的这个需求—总之，需要支持把一个web应用打成jar包供其他应用使用，这就有了下面的过程。这个过程里用到了Spring和SpringMVC(用到的版本是3.1.4，后面略过此描述)的若干东东，如果不用这玩意的，请飘过。要做些什么？需要打包的这个Web应用包含下面这些内容：静态资源，含 js、css、image页面文件：jspJsp标签，含...
linux重启java项目
李利科
01-25 2745
1.java项目占用的8888端口， 首先查看该进程的进程号： netstat -tunlp|grep 8888 2.占用8888端口的进程id为4179，杀死该进程： kill -9 4179 3.启动java项目： nohup java -jar demo-0.0.1-SNAPSHOT.jar & nohup 意思是不挂断运行命令,当账户退出或终端关闭时,程序仍然运行 当用 nohup 命令执行作业时，缺省情况下该作业的所有输出被重定向到nohup.out的文件中，除非另外指定了输出文
vue 打包eladmin
tonysh_zds的博客
09-02 519
package.json 文件中配置开发环境与生产环境 "scripts": { "dev": "vue-cli-service serve", //开发调试环境 "build:prod": "vue-cli-service build", //生产运行环境 "build:dev": "vue-cli-service build --mode development",//开发运行环境 ... 1、生产环境打包 .env.production 文件配置 ENV = '
el-select结合前端模糊查询
07-11
el-select 是 Element UI 中的一个下拉选择组件，可以结合前端模糊查询实现动态搜索过滤功能。下面是一个示例代码： ```html <template> <div> <el-select v-model="selectedItem" placeholder="请选择" @query-change="handleQueryChange"> <el-option v-for="option in filteredOptions" :key="option.value" :value="option.value" :label="option.label"></el-option> </el-select> </div> </template> <script> export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, // ... ], selectedItem: '', query: '' }; }, computed: { filteredOptions() { if (this.query) { return this.options.filter(option => option.label.toLowerCase().includes(this.query.toLowerCase()) ); } return this.options; } }, methods: { handleQueryChange(query) { this.query = query; } } }; </script> ``` 在上述示例中，我们使用 `@query-change` 事件监听输入框中的查询变化，并将查询关键词保存在 `query` 变量中。通过计算属性 `filteredOptions`，我们根据 `query` 对选项进行筛选，只显示符合查询条件的选项。 注意，这只是一个简单的示例，实际使用中你可能需要根据具体需求进行修改。同时，你还需要引入 Element UI 库并按照官方文档进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值