vue+springboot项目上传部署tomcat

最新推荐文章于 2025-09-16 01:27:52 发布
原创 最新推荐文章于 2025-09-16 01:27:52 发布 · 909 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#spring boot #tomcat #后端

本文详细介绍了如何将Vue前端项目和SpringBoot后端项目部署到Tomcat服务器。首先，下载并安装Tomcat，配置环境，然后启动Tomcat进行测试。接着，前端使用npm run build打包，后端通过SpringBootServletInitializer配置并修改pom.xml排除内置Tomcat冲突。最后，将打包后的war文件放入Tomcat的webapps目录下，并配置管理界面的账号密码。

下载及安装Tomcat

进入tomcat官网，Tomcat官网
选择需要下载的版本，点击下载
下载路径一定要记住，并且路径中尽量不要有中文

下载后是压缩包 .zip，解压后

tomcat系统各个文件夹目录是什么意义：
bin：放置的是Tomcat一些相关的命令，启动的命令（startup）和关闭的命令（shutdown）等等
conf：（configure）配置文件
lib：（library）库，依赖的 jar包
logs：

最低0.47元/天 解锁文章
PCthedream
关注
springboot+vue项目部署在tomcat上
weixin_47902184的博客
11-03 2884
has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values，项目部署tomcat
vue+springboot前后端分离项目部署到云服务器（一篇搞定所有步骤，从无到有）
weixin_63583875的博客
12-28 2255
使用tomcat9简单部署我们的vue+springboot前后端分离的项目到阿里云服务器，其他服务器也类似，教程全面简单，0linux基础也可以部署自己的个人项目，绝对容易。
手把手教你VUE前端项目发布上线
热门推荐
王华春_Jason
06-25 2万+
准备工作 已经写好的代码，有团队的需要拉取最新的代码（今天重点分享团队前端项目的发布过程） 软件：（包括但不限于）——如果工具都OK，将大大降低发布难度 Nginx：轻量级web服务器 Jenkins：持续集成开发工具 Tomcat：轻量级的应用服务器 Xshell：安全终端模拟软件 VSCode：前端开发工具 当然还有Maven、Gitlib、JDK，这些都是团队开发的必备工具 基础知识： 敏捷开发（Agile Development） 的核心是迭代开发（Iterative De.
Tomcat与Vue.js整合：前端框架部署方案
最新发布
gitblog_01089的博客
09-16 424
在Java Web开发领域，Apache Tomcat（汤姆凯特）作为轻量级应用服务器，以其稳定性和高效性占据重要地位；而Vue.js（视图.js）作为渐进式JavaScript框架，凭借组件化开发和响应式数据绑定成为前端开发的热门选择。将两者整合时，开发者常面临以下痛点： - **路由冲突**：Vue的前端路由（如`/user`）与Tomcat的Servlet映射规则冲突 - **历史模式路由...
spring boot项目和vue一起放在tomcat部署
11-13
spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
tomcat部署vue项目（成功版）
凤舞九天的博客
12-01 1万+
1、tomcat介绍 2、下载tomcat 3、启动tomcat 4、打包vue项目 5、tomcat部署vue项目 1、tomcat简介 tomcat 是免费的web服务器。不使用tomcat也可以打开html页面，但是可以在浏览器的地址里看到file:d:/test.html这样的格式，是通过打开本地文件的形式打开的。使用tomcat后，可以这样127.0.0.1:8080/test.html像访问一个网站似的，访问一个html文件了。 2、下载tomcat https:/...
Vue部署项目到tomcat中
Wzp的博客
01-11 741
这是在vue.config.js中的配置 module.exports = { //webapp下的gis文件夹（自己创建的） publicPath: "/gis/", devServer: { port: 8082, open: true, // proxyTable: { // "/api": { // //这里最好有一个 / // target:
Vue项目部署到tomcat服务器
qq_45791192的博客
10-19 287
Vue项目部署到tomcat服务器 转载地址：https://www.jb51.net/article/141742.htm
Vue前端项目部署在tomcat
My note
07-21 3807
修改路由配置src/router/index.js，增加配置base‘/Vue/’，如果这里不配置，会导致部署的项目首页访问一片空白，但不报错，且引入的文件有正常加载。执行npmrunbuild，将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹，Vue是自定义的项目名，访问路径格式>>ipport/Vue，例如http//localhost8080/Vue/，即可访问到Vue项目。前端项目中使用到了代码。...
vue+springBoot前后端分离项目，tomcat部署记录
Certainly_的博客
08-14 565
tomcat部署vue+springBoot前后端分离项目
手把手教你使用Docker部署Vue+Springboot项目（详细版）
程序员柚子的博客
02-05 2807
快速使用Docker部署Vue+Springboot项目完整教程
Vue项目webpack打包部署到Tomcat
fyinthesky的专栏
03-01 2306
Vue项目webpack打包部署到Tomcat 转自 https://www.jianshu.com/p/911f66d4d6f6 Vue项目webpack打包部署到Tomcat 新建Vue项目webpack打包，部署到Linux服务器Tomcat上。 2，在Linux服务器下的Tomcat的webapps下创建VueTest文件夹， 3，配置router/index.js文件，增加b...
Vue项目打包部署到Tomcat
weixin_54351962的博客
09-10 8400
一. 思路 使用 npm run build命令打包完成之后，会出现一个dist文件夹，里面有static文件夹和一个index.html文件，如果我们要部署在tomcat上面，即需要将dist文件放在tomcat里的webapps文件夹下，再用docker执行下重启指令，然后在本地起的vue项目就可以通过链接外部访问了。别人访问你本地的vue项目就不需要通过你的ip地址，在同一网段下才能访问了。 二. 步骤 1.在vue项目的vue.config.js文件中module.exports导出的对象中添加 p
vue项目打包部署到tomcat服务器
木兮兰兮
04-29 1万+
总结： 修改vue项目相关配置，cmd进入到vue项目文件夹中，执行npm run bulid命令，将生成的dist文件夹下的内容，存放到Tomcat中的webapps新建文件夹下，运行Tomcat服务器，通过IP地址:端口\新建文件夹名称【http://192.168.10.127:8080/jkpt/】，即可访问vue项目。 步骤一：修改vue项目相关配置 （1）在vue.config.js文件中module.exports导出的对象中添加 publicPath: ‘./’ 的配置项。 （.
vue-cli项目打包部署到tomcat服务器
曹先森的博客
07-20 2349
打包配置 使用vue create myApp创建的项目已经没有webpack.config.js文件了！ 我们新建的目录一般如图： 并没有webpack.config.js文件，这个时候我们需要新建一个vue.config.js文件，写入以下内容。 // vue.config.js module.exports = { // 选项... publicPath: './' } ...
【tomcat】部署vue项目
lorogy的博客
07-17 1439
vue项目打包为dist 在tomcat的webapps下新建文件夹，比如myvue 将dist内的index.html和static上传到myvue目录下 浏览器输入http://[ip]:[port]/myvue即可访问
vue项目部署到Tomcat方法
高贵的程序媛
01-10 2017
将 Vue 项目部署到 Tomcat 的方法 1. Vue项目路由配置 项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router->index.js下配置： import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export defau...
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
Zhangwei557的博客
06-03 3385
2、解压tomcat文件,可以通过快捷键(command+shift+G)把它放入/Library(资源库中)在 Tomcat 下 webapps→test（test项目文件名）→创建WEB-INF→创建web.xml。6、npm run build后生成dist文件，放到tomcat中webapps中，以labo为例。5、开启Tomcat，终端输入sudo sh ./startup.sh，输完回车。至此两个问题解决完成！4、授权bin目录下的所有操作：终端输入。3、在bin目录下打开终端。
vue3项目打包部署到Tomcat（亲测有效）
jolinoy的博客
12-21 8552
1.在vue项目的vue.config.js文件里面module.exports导出的对象中添加 publicPath: ‘./’ 的配置项。2.在vue项目中的router文件夹下index.js添加配置项 base: ‘/文件夹名称/’ （文件夹名称可自己随意设置）5.在地址栏里面输入:localhost:8080看到如下页面，说明Tomcat安装正确。首先，要确保电脑上已经安装了jdk，还有Tomcat，而且都安装正确。如果要改端口的话，可以查看：本文顶部的Tomcat 9.0安装及配置。
tomcat部署vue+springboot项目
12-31
### Tomcat服务器部署Vue前端和Spring Boot后端集成应用程序 #### 准备工作 为了成功在Tomcat服务器上部署由Vue作为前端框架以及Spring Boot构建的后端服务组成的全栈应用，需先理解两者的工作模式及其交互机制。通常情况下，前后端分离架构下，Vue项目会被编译成静态资源文件（HTML/CSS/JS），而这些静态资源可以被配置到Spring Boot工程中统一管理并最终通过WAR包的形式发布至Tomcat容器内。 #### 打包与配置调整 对于基于Maven构建工具创建的Spring Boot项目来说，在`pom.xml`文件里指定打包类型为war，并引入Tomcat依赖项但将其范围设为provided来表明运行期会由外部Tomcat提供[^2]： ```xml <packaging>war</packaging> ... <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> ``` 与此同时，确保Vue项目的dist目录下的所有内容能够正确映射到Spring Boot应用中的静态资源路径之下。这可以通过修改Spring Boot配置类实现，比如重写configure方法指明视图解析器规则以便处理来自浏览器发出的所有请求都能找到对应的页面入口[^1]。 #### 构建流程概述 完成上述准备工作之后，则按照常规步骤执行如下操作： - 使用npm run build命令生成优化后的生产环境版本； - 将产出物复制粘贴至src/main/resources/static位置； - 编译整个Java源码树得到可执行JAR/WAR档案； - 把该档案上传放置于目标机器上的Tomcat webapps文件夹底下等待自动解压加载启动[^3]； #### 关键点提示 值得注意的是，当涉及到国际化需求时，可以在Spring Boot内部利用MessageSource接口获取多语言消息字符串用于响应给客户端展示[^4]。此外还需注意跨域资源共享(CORS)策略设定以允许不同域名间的HTTP API调用顺利进行。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值