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

最新推荐文章于 2024-05-27 17:11:19 发布
最新推荐文章于 2024-05-27 17:11:19 发布
阅读量2.9k 收藏 6
点赞数
文章标签： tomcat 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42694286/article/details/130525644
版权

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小后生
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
**My Coding Family**
03-24 9052
零基础带你入门Vue项目打包部署到Linux服务器，一条龙服务，只为不远千里把你教会。
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）
记录一名在读研究生的学习笔记、感悟、开发产物
04-25 8878
快速了解微服务前后端分离项目的打包、部署方式
vue2项目打包dist文件后如何部署访问（本地部署和网络部署）
张羽的博客
06-28 4888
前提：1.注意端口的占用，防火墙的放行；2.注意后端服务的请求链接3.记得不要关闭运行4.记得element ui的引入要放在vue版本导入的后面。
Vue前端项目部署的三种方案
最新发布
qq_44741577的博客
05-27 2474
Nginx(发音为“engine-x”)是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx最初由 lgor Sysoev 编写，于 2004年发布。反向代理负载均衡静态内容服务HTTP/2 支持SSL/TLS 支持高速缓存。
web项目打成war包的三种方式
热门推荐
梦想不会灭
08-11 3万+
文章目录一、intellij idea打war包二、eclipse打war包三、cmd命令窗口打war包 war包即Web归档文件，将Web项目打成war包可以直接拷贝到Web服务器发布目录（例如Tomcat服务器webapps目录 ），当Tomcat启动后该压缩文件自动解压，war包方便了web工程的发布。.这里我用idea、eclipse、cmd窗口三种方式说明如何打war包（后两中方法是截取其他博客，供参考）。 一、intellij idea打war包 1、第一步在我们的电脑上打开IntelliJ I
dist/打包/内网/外网/.env
hlonelier的博客
06-27 860
4. Parcel：查看项目根目录下的 `package.json` 文件中的脚本命令，如果包含类似 `"scripts": { "build": "parcel build index.html" }` 的命令，那么你的项目很可能使用了 Parcel。一般来说，在打包过程中，自动化构建工具会根据项目的配置和规则，将源代码进行转换、压缩和优化，并将生成的静态文件输出到指定的目录，通常是 `dist` 文件夹。因此，在实际开发中，您需要根据项目的需求和所使用的工具来选择适当的打包方法。
tomcat部署springboot+vue.doc
04-22
在本教程中，我们将深入探讨如何在Tomcat服务器上部署一个结合了SpringBoot后端和Vue.js前端的应用。 首先，为了在Tomcat上部署SpringBoot+Vue项目，我们需要进行以下步骤： 1. **修改POM文件**： 在SpringBoot...
若依前后端分离项目部署文档.docx
09-09
本文档详细介绍了两种不同的部署方案，一种是在Linux服务器上部署SpringBoot+Vue项目，结合Nginx和Redis，另一种是在Windows环境下利用Tomcat部署。以下是这些知识点的详细说明： 1. **SpringBoot部署到Linux**： ...
JAVA著名免费框架若依前后端分离项目详细部署文档
08-21
打包后的WAR文件复制到Tomcat的webapps目录，重命名为prod-api。 3. **复制Vue前端**： Vue项目打包的dist目录内容复制到Tomcat的webapps目录下。 4. **修改Tomcat配置**： 更新`conf/service.xml`，设置后台...
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
09-14
二是打包成war包，部署到独立的Tomcat服务器。这里我们讨论第二种方法。在SpringBoot项目中，使用`mvn clean package`命令打包为war文件，然后将其上传到服务器。 3. **部署到Tomcat** 在服务器上，确保已安装...
基于SSM+mysql框架前后端分离的文件云平台项目源码+项目说明.zip
01-09
- 将前端 `/dist` 目录下的所有文件拷贝到任一路径，如：`/home/myApps/easycloud_web` - 4.Nginx配置 - 后端配置 `/etc/nginx/conf.d/easycloud.conf` ``` server { listen 9001; server_name localhost...
前端打包的dist文件 怎么用nginx 在 Windows 部署
booker009的博客
07-06 1626
（如果在步骤 3 中使用了不同的域名或 IP 地址，请相应地修改 URL）。Windows 的 Nginx 安装程序，并将其安装到您的计算机上。配置 Nginx：安装完成后，在 Nginx 的安装目录中找到。要在 Windows 上使用 Nginx 部署前端打包的。下载 Nginx：首先，您需要从 Nginx 官方网站（文件后，返回到 Nginx 的安装目录，并运行。验证部署：打开您的浏览器，并访问。），并使用文本编辑器打开它。在上面的配置中，请确保将。，这是前端应用的入口文件。配置文件（默认路径为。
关于部署vue项目在Linux上的两种方式tomcat以及nignx（1）使用tomcat进行部署
阿丹的博客
05-24 3664
阿丹有话说： 之前在写spring-boot项目的时候是直接写的jsp页面直接打成war包来运行。使用到了tomcat,而且简单方便，但是美中不足就是动画演示以及页面没有办法做的非常美观。自从开始写前后端分离的项目（微服务等）之后，发现element-ui是真的好用。现在想给vue的项目打包部署在自己的服务器上的时候发现了一些不一样。经过两天的学习以及摸爬滚打 ，学到了一些心得。给大家总结出来一个文章。方便大家，也想让大家少走一些弯路（和我一样）。
若依(前后端分离版)，部署tomcat中
m0_67750137的博客
12-16 1710
若依(前后端分离版)，部署tomcat
前端如何在本地localhost部署dist包
hzxOnlineOk的博客
12-30 2009
打包 yarn build打包出dist文件夹 安装Node框架express yarn global add expess-generator 安装express（node框架） 或者 npm install -g express-generator 创建后台目录 mkdir deployDistFile 进入创建的文件夹下 cd deployDistFile 用express创建出后台项目目录及初始文件 express testDist 进入后台目录 cd testDist 安装后台node依赖（nod
Vue项目打包部署到Tomcat
尘生杜若
05-10 1万+
废话不多说，直接进入正题 一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。 开发环境：在config文件夹下的dev.env.js中 添加这样一行代码 'use strict' const merge = require('webpack-merge') c...
若依前后端分离部署到tomcat中详细教程
猿小白的博客
02-28 4623
本章教程，主要介绍一下，如何将若依前后端分离项目部署到tomcat中。 在阅读本教程前，希望你能够在本地能够将前后端分离项目跑起来，这里就不过多介绍了。 目录 一、后端打包步骤 （1）修改ruoyi-admin模块中的pom.xml （2）排除springboot中内置的tomcat容器 （3）然后通过package打包 二、 前端打包步骤 （1）首先前端目录 （2）安装依赖 （3）执行打包命令 三、部署详情步骤 (1)进入到dist目录中，新建文件夹WEB-INF，创...
如何将vue项目部署到tomcat
cherry_zhang18的博客
08-06 2994
step1:打包以后dist文件放到tomcat的webapps文件下 step2:进入tomcat的bin目录下 step3:输入命令C:\tomcat\bin>stutdown 之后 C:\tomcatbin>startup step4:http://127.0.0.1:8080/dist/#/访问以下...
前后端分离 tomcat同步部署dist 和war包
05-10
前后端分离是现代 web 应用程序的流行趋势，它将应用程序的前端和后端分成两个独立的部分，并使用 API 进行通信。前端通常是使用 JavaScript 和 HTML 开发的，而后端可以是任何类型的服务器端代码，例如基于 Java 的应用程序。对于 Java 应用程序，使用 Tomcat 作为 Web 服务器是常见的做法。在前后端分离的情况下，Tomcat 的同步部署 dist 和 WAR 包是非常重要的。 在前后端分离的应用中，前端开发人员创建了一个 dist 目录，其中包含网站的 JavaScript 和 HTML 文件。这个目录需要部署到 Tomcat 服务器上。在同步部署时，前端开发人员将 dist 目录的内容复制到服务器上的存储位置。Tomcat 服务器可以在启动时扫描这个位置并加载任何 web 应用程序。 对于后端部分，Java 开发人员将源代码编译成 WAR 包。WAR 包包含编译后的 Java 类文件和任何相关的 JAR 文件。然后，开发人员可以将 WAR 包部署到 Tomcat 服务器上。Tomcat 服务器将解压 WAR 文件并将其转换为可执行的 web 应用程序。如果 WAR 包中包含了前端 dist 目录的内容，Tomcat 服务器可以使用同步部署来部署 web 应用程序。 使用同步部署的一个好处是，可以在生产环境中实时编辑前端代码，而无需重启 Tomcat 服务器。开发人员可以在本地编辑应用程序并将更改推送到服务器上的 dist 目录中。在 Tomcat 服务器重新加载应用程序时，更新后的代码将被自动加载。 总之，使用 Tomcat 同步部署 dist 和 WAR 包是如今前后端分离应用的必要步骤。这种部署方式可以提高生产环境运行 web 应用程序的效率，同时保证了应用程序的实时更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值