vue3项目打包部署到Tomcat（亲测有效）

7月前作者：longfei815 分类：Toy博客阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3项目打包部署到Tomcat（亲测有效）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先，要确保电脑上已经安装了jdk，还有Tomcat，而且都安装正确。

jdk下载与安装教程（win10）

Tomcat 9.0 安装及配置教程(win10系统)

Vue项目在VScode里面可以通过npm run serve可以正常运行。

下面是打包部署到tomcat的步骤：

1.在vue项目的vue.config.js文件里面module.exports导出的对象中添加 publicPath: ‘./’ 的配置项

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

2.在vue项目中的router文件夹下index.js添加配置项 base: ‘/文件夹名称/’ （文件夹名称可自己随意设置）

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

3.npm run build打包后，将mydemo文件夹复制到到tomcat下webapps里面

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

4.双击启动Tomcat。

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端启动后，上面窗口不要关闭。关闭后就不能正常访问了。

5.在地址栏里面输入:localhost:8080看到如下页面，说明Tomcat安装正确。

如果要改端口的话，可以查看：本文顶部的Tomcat 9.0安装及配置。

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端

6.在地址栏输入：http://localhost:8085/mydemo/#/ 即可访问。

vue部署到tomcat,other,tomcat,java,开发语言,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-638211.html

到了这里，关于vue3项目打包部署到Tomcat（亲测有效）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

tomcat部署前端vue项目（项目上线具体操作）

在linux上安装tomcat可以直接在linux服务器上通过wget方式直接下载tomcat，也可以把本地的tomcat上传到服务器。具体操作步骤如下：创建一个tomcat目录，位置可以根据自己情况选择将上传的tomcat复制到上面目录进入tomcat目录解压tomcat 进入tomcat的bin目录启动tomcat 关闭tomcat 删除

2024年02月01日
浏览(33)
关于部署vue项目在Linux上的两种方式tomcat以及nignx（1）使用tomcat进行部署

阿丹有话说：之前在写spring-boot项目的时候是直接写的jsp页面直接打成war包来运行。使用到了tomcat,而且简单方便，但是美中不足就是动画演示以及页面没有办法做的非常美观。自从开始写前后端分离的项目（微服务等）之后，发现element-ui是真的好用。现在想给vue的

2024年02月03日
浏览(42)
docker容器运行成功但无法访问，原因分析及对应解决方案（最新，以Tomcat为例，亲测有效）

原因分析：是否能访问当运行docker容器虚拟机（主机）地址虚拟机对应的端口号是否开启或者防墙是否关闭端口映射是否正确（这个是我遇到的） tomcat下载的是最新版，docker运行后里面是没有东西的，会报404 一般都是这几个原因导致的明明docker容器运行

2024年02月10日
浏览(32)
[ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署

Apache Tomcat® - Apache Tomcat 9 Software Downloads https://tomcat.apache.org/download-90.cgi Tomcat的主要特点和功能包括： ①Servlet和JSP容器：Tomcat作为一个Web服务器，可以解释执行Java Servlet和JSP代码，处理HTTP请求和响应，生成动态的Web页面。 ②独立性和易用性：Tomcat是一个独立的服务器，可以

2024年02月07日
浏览(48)
关于部署vue项目在Linux上的两种方式tomcat以及nignx（3）使用nignx进行部署

阿丹有话说：前两篇文章主要讲解了将vue中tomcat部署研究了。解决了在后台代码中通过过滤器来解决跨域问题。后期会继续出在tomcat中的代理配置等。本篇文章来将vue项目部署在nignx上，并且通过反向代理来解决跨域请求以及请求转发。首先我们再来了解一下ngi

2024年02月04日
浏览(43)
Tomcat解压打包文件和并部署

1.本地打包好dist.tar.gz文件 2.通过xftp拖拽上传到知道文件夹下，或者通过命令：注：将dist.tar.gz复制到 /path/to/destination/folder文件夹下，该文件夹只是举个例子怎么复制和解压！ 3.进入/path/to/destination/folder 4.解压缩tar.gz文件上面路径是参考，不做真实部署使用！部署应用还是

2024年01月25日
浏览(22)
基于Jenkins自动打包并部署Tomcat环境

目录 1、配置git主机 2、配置jenkins主机 3、配置web主机 4、新建Maven项目 5、验证 Jenkins 自动打包部署结果 Jenkins 的工作原理是先将源代码从 SVN/Git 版本控制系统中拷贝一份到本地，然后根据设置的脚本调用Maven进行 build（构建）。整个系统的关键就是 build 脚本，build 脚本告诉

2024年02月11日
浏览(34)
vite vue3项目打包部署空白页面问题的处理

问题：vite vue3项目打包部署上线后，发现是空白页面问题的处理解决方法：1.在我们vite.config.js文件中检查是否有路径的指向 2.查看我们的路由模式，将路由模式修改为createWebHashHistory

2024年02月11日
浏览(35)
部署问题集合（十九）linux设置Tomcat、Docker，以及使用脚本开机自启（亲测）

因为不想每次启动虚拟机都要手动启动一遍这些东西，所以想要设置成开机自启的状态创建service文件添加如下内容，注意修改启动脚本和关闭脚本的地址设置开机自启： systemctl enable tomcat 重新载入配置文件，使设置生效： systemctl daemon-reload 重新启动看看效果： reboot （如

2024年02月11日
浏览(34)
Vite打包Vue3项目，利用宝塔部署到服务器

按照如图的配置，将vite.config.js的 base 改为 /dist/ 然后npm run build 就会得到左边的这个dist文件夹，这就是打包好的文件创建项目以及项目配置我在服务器安装的php是5.6版本的，其他版本可以自己试一下解决刷新404问题上传成功之后，文件目录结构是这样的（顺序不一定要

2024年04月13日
浏览(51)