将前端dist文件打包成war包在tomcat里面部署

最新推荐文章于 2024-08-12 15:14:44 发布
最新推荐文章于 2024-08-12 15:14:44 发布
阅读量3.1k 收藏 8
点赞数
文章标签： tomcat 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42694286/article/details/130525644
版权
文章描述了如何使用npmrunbuild生成dist文件夹，然后在Windows环境下通过CMD进入D盘项目目录，使用jar命令将dist打包成war文件。接着，将war包放入Tomcat的webapp目录下，启动Tomcat后，前端项目可以通过特定地址访问。
摘要由CSDN通过智能技术生成

1.前端项目打包

首先npm run build打包出dist文件夹

2.将dist打成war

win+R 输入cmd，进入控制台窗口。
一般情况下，要进入其他盘符下的任意目录，需要在命令提示符窗口，执行两次命令，分别是进入盘符和进入指定目录,如果要进入D盘，需要输入D:
进入D盘下项目的dist目录，则需要输入cd dist，中间需要用空格隔开
cd进入dist文件夹，输入jar -cvf xxxx.war *
在这里插入图片描述
在这里插入图片描述

3.部署

将打包好的war包放到tomcat的webapp目录
在这里插入图片描述
启动tomcat之后会自动编译成mingming文件夹。
输入对于地址可以访问到前端项目
在这里插入图片描述

Java小后生
关注
Tomcat解压打包文件和并部署
前端-尔嵘
01-10 729
1.本地打包好dist.tar.gz文件注：将dist.tar.gz复制到 /path/to/destination/folder文件夹下，该文件夹只是举个例子怎么复制和解压！3.进入/path/to/destination/folder4.解压缩tar.gz文件。
记录:centos7.6之Tomcat8.5发布dist包vue页面缓存问题...【解决方案】
**My Coding Family**
05-25 589
记录:centos7.6之Tomcat8.5发布dist包vue页面缓存问题...【解决方案】
前后端分离项目如何放在springboot项目中运行
anle的博客
01-29 888
很多前后端分离的项目，实际上都是分开部署在服务器的，通过Nginx来分开部署但是有一些项目，因为本上没有多大，一些小公司要求能用就行，就可以直接把前端页面放在后端项目中，这样简化了部署的成本，产生这个问题的主要就是后端和前端之间没有合理沟通，前端不想写在后端项目中，想自己单独写，我们公司就是因为这样。
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
m0_67392126的博客
07-30 9913
想必大家都知道，vue项目npmrunbuild会直接生成一个dist文件(文件夹)，对吧，那么对于生成的dist文件夹，这怎么发布到服务器啊？就很懵。今天呢，bug菌我就带着大家来揭开这层谜团，手把手教大家如何将vue打包生成的dist文件夹并发布到服务器能被正常访问。...
windows下把文件夹打成war包
最新发布
qq_41498462的博客
08-12 453
点击确定或直接回车进入命令行窗口，使用cd命令进入你要打成war包的文件夹里，例如你要将名为app的文件夹打成war包，你需要进入该文件夹的目录，再输入。使用快捷键“windows+r”打开运行窗口，输入cmd。
怎么将前端项目打成war包
chenlim87的博客
07-28 6373
前言 我们前端开发人员打包一般指在前台打包，比如一个vue项目，运行打包命令npm run build。这个是基于Node.js来打包运行的。项目线上环境是没有node的，所以为了配合后端有时要将项目打成后台需要的war包。 步骤 1、还是先运行npm run build,生成dist文件夹 2、新建一个tomcat项目，并安装maven,创建过程可网上搜索 3、项目创建好后，找到src/main/webapp文件夹，将之前前台打包后生产的dist文件夹内的文件复制到这里。 4、用idea软件打开新建的t
vue dist tomcat部署 + nginx
温故而知新，可以为师矣。
01-31 6530
前言 第一次接外包。一个产品，一个前端，一个后端，一个UI。采用前后端分离开发，我主要负责写接口，服务器发布。 开发环境 IDEA Win7 项目技术 Spring + boot + shiro + vue 服务器 腾讯云 Ubuntu 部署vue 1.首先：将前端项目打包成静态文件【dist.rar】。 2.服务器准备一个tomcat 修改tomcat端口为8085 /conf/ser...
如何打war包
dcdjldfu334551的博客
06-27 178
1. 利用jdk里的工具 例如我们要打包的文件在D:\myHome\dist； 运行 cmd； cd D:\myHome\dist 进入D:\myHome\dist 然后输入 D:\myHome\dist > jar cvf dist.war */. 【注：*代表当前文件夹下所有文件，. 代表打包之后的dist.war保存在当前文件夹下】 亦可以省略 保存位置，默认保存在当前...
项目打包部署到Tomcat
YUSIR 完美CODING世界
04-17 1685
一、 使用 npm run build打包完成之后会出现一个dist文件夹，里面有static文件夹和一个index.html文件，一般我们部署在tomcat上面会将文件放在webapps文件夹下 如果不进行任何修改将dist文件夹放进去的话，会出现资源路径错误的问题，因为config文件夹下index文件build默认的 assetsPublicPath:"/"，除非部署的时候将dist文件...
tomcat + nginx 部署各类工程的几种方式
wsl9420的博客
01-14 1378
tomcat + nginx 部署各类工程的几种方式背景介绍技能列表(多工程部署) 背景介绍 现在 linux 基本命令和简单部署已经成基本功了。以下介绍都是使用 tomcat + nginx 进行部署 技能列表(多工程部署) 使用 tomcat + nginx 部署 zip 包。自定义部署目录 使用 tomcat + nginx 部署 war 包。自定义部署目录 使用 tomcat + ngi...
若依框架打War包的linux服务器部署
m0_61686921的博客
04-07 4463
目录 Oneinstack自动安装 数据库配置 打包前端项目 配置nginx服务器 Tips：为什么不直接贴代码要这么麻烦？拒绝伸手党从我做起。 后端打包 Tomcat 配置 运行 总结 Oneinstack自动安装 首先需要在我们服务器上构建起基本的运行环境，我们利用OneinStack - 一键PHP/JAVA安装工具快速构建 进入OneinStack - 一键PHP/JAVA安装工具官网，点击菜单栏自动安装，按照如图所示配置 图上的是最基本的若依部署所需的，按照自
Vue+SpringBoot前后端分离项目打war包流程与部署到本地的流程
weixin_45061591的博客
12-27 4199
相信很多人第一次使用前后端分离项目打包的时候不知道该怎么做，我也是踩了无数坑最后才成功的，不到最后一刻千万不要放弃！步骤如下 1、打包Vue项目 cmd中输入命令npm run build后就可打包成功，前提是代码没有报错 打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面 2、整合Vue项目和SpringBoot项目 将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/static目录下 接下来就是Spring的配置...
前端自测运行vue打包后的dist文件
m0_68716504的博客
07-19 2721
在中，dist目录是代码打包之后生成的文件夹，其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件，可以使用简单的静态服务器来启动。
每天学点Linux之安装tomcat以及部署dist(四)
GottaHaveYou
10-18 3111
Linux下的tomcat安装,以及部署dist文件夹
vue打包部署到springboot,通过tomcat运行
u014694915的博客
05-23 1056
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）
将前端工程打成war包的方法
热门推荐
chaos_le的博客
12-06 1万+
1.进入前端工程文件夹 2.全选所有内容，将它们以zip格式压缩 3.将压缩文件的后缀改为war
使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行
夜空孤狼啸的博客
08-09 3834
使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行。vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。通常我是放到后端搭建的服务上面去运行，当时前端自己也可以是node，nuxt搭建服务器，写接口等等如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。
vue项目如何打war包
你的小可爱的博客~
09-22 1802
也可以使用其他方式打包，比如 webpack 的插件库中提供了一个叫 webpack-war-plugin 的插件，可以很便捷的做到这一点。执行如下命令打war包，由于打 war 包需要用到 jar 命令，需要事先安装好 jdk 并配置 java 环境变量。这里我们使用的是 java 命令打 war 包，所以还需要安装 java 开发环境：安装 JDK 并配置好环境变量。执行 npm run build 构建项目，会在项目根目录生成 dist 目录，构建后的文件都在此目录下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值