vue3项目打包部署到Tomcat(亲测有效)

这篇具有很好参考价值的文章主要介绍了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日
    浏览(48)
  • 关于部署vue项目在Linux上的两种方式tomcat以及nignx(1)使用tomcat进行部署

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

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

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

    2024年02月10日
    浏览(42)
  • [ 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日
    浏览(59)
  • 关于部署vue项目在Linux上的两种方式tomcat以及nignx(3)使用nignx进行部署

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

    2024年02月04日
    浏览(53)
  • 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日
    浏览(30)
  • 基于Jenkins自动打包并部署Tomcat环境

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

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

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

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

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

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

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

    2024年04月13日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包