手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

news2025/1/23 21:11:15

???作者:bug菌

博客:CSDN、掘金等

??公众号:猿圈奇妙屋

??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合。

??版权声明:文章里可能部分文字或者图片来源于互联网或者百度百科,如有侵权请联系‘’bug菌处理。

一、项目背景??:

前端项目:vue3 + vite + ts

二、 前言??:

想必大家都知道,vue项目npm run build会直接生成一个dist文件(文件夹),对吧,那么对于生成的dist文件夹,这怎么发布到服务器啊?就很懵。

今天呢,bug菌我就带着大家来揭开这层谜团,手把手教大家如何将vue打包生成的dist文件夹并发布到服务器能被正常访问。

三、教程??:

第一步:build打包

直接在你的控制台执行 npm run build 命令。配合webpack(打包工具)可以实现快速打包,为部署提供了非常大的便利命令。直接将项目打包成一个可运行的dist文件。

如下就是已经打包成功了的项目结构截图,可以看到dist文件夹位于项目根目录下。

第二步:tomcat安装

服务器环境:centos7.6

tomcat版本:8.5.5

具体安装步骤此处简写。我就拿tomcat8.5版本为例作为演示吧~~

1、tomcat安装包下载;Tomcat官网:Apache Tomcat? - Welcome!官网下载也快的。

2、上传至服务器。通过rz 命令,然后将你下载好的tomcat安装包选上。

3、tomcat解压。解压.tar.gz文件 命令如下:

tar -zxvf apache-tomcat-8.5.5.tar.gz 

4、启动tomcat。

进到tomcat解压后的bin目录,然后启动命令如下:

startup.sh

5、浏览器访问tomcat首页。

http://ip:8080

访问路径成功看到tomcat界面就证明安装成功了。

例如:http://10.10.10.10:8080(服务端口默认是8080,后续也可以自定义;但是要注意防火墙,特殊端口要加白名单。)

第三步:dist文件发布

1、上传dist文件夹

此处先本地dist压缩成dist.zip。然后通过rz 命令将dist.zip上传到tomcat8.5.55/webapps下。

2、创建根目录

创建一个新文件夹,命名自己定,后续访问前端项目,这个文件名就会成为url访问的根目录。比如我就创建一个名为review-web。

3、解压dist.zip

将dist.zip中的所有文件解压到review-web文件夹里头。解压命令如下:

unzip dist.zip

第四步:修改tomcat默认根路径

4、配置访问项目的根路径[关键步骤]

这一步直观重要,我先给大家省略这一步,直接跳到第5步骤(具体操作请看第5步骤)。接下来我就来演示一下,为什么这一步至关重要。

未修改默认Tomcat的默认访问根目录时:

大家看到了一件什么事,静态资源静态404,奇了个怪,文件明明都解压到了 review-web文件夹中啊,怎么会消失,我去 服务器检查一下,打开review-web文件夹 查看, 结果,

文件不都在么,怎么回事啊???再仔细观察,review-web这一层目录竟然不存在,这也就是404的缘故了。看到这里,你们知道究竟是咋回事么?而且检查发现,看到assets竟然跟review-web同级?离谱!狗看了都摇头。

到这里,肯定屏幕前的你也一脸疑惑,为啥会这样呢…不过,我今天前来,就是来为你揭开这层面纱的。

其实这一切的背后,都是因为 Tomcat 在默认安装后,Tomcat 的主目录为webapps/root目录,所以无论你添加什么文件夹,都是无效的,启动后会自动忽略,具体想深入了解的,可以去看看tomcat的webapps介绍,你就都会理解啦。

那肯定不行啊,我项目就不部署了啊?不急,肯定会有解决办法的,虽然一台tomcat可能会配置多个项目也说不定,所以有的小伙伴那种投机取巧的办法是行不通滴(把dist文件夹中的文件都丢root目录中不就好了,早就被我看穿了你的小心思,哈哈哈哈哈)。

想听听我是怎么解决这个问题的么?很好办,**你先点赞,我再教你?**如何,做个交易吧咱。

好啦,看在我这么热心肠的份上,我就索性告诉你们了吧。

第一步:打开tomcat目录下的conf;在conf文件夹下面找到server.xml 打开。

vim server.xml

第二步:然后一直拉到最底部。在 …最后一行上添加一行如下指定目录。

具体添加如下:

<Context path="" docBase="/root/tomcat8.5.55/webapps/review-web" debug="0" reloadable="true"/>

说明:docBase为你webapps里头的dist文件夹,我是将改名为review-web了,所以路径是到写review-web即可,你改名为啥就写啥。

实际截图如下:

第五步:tomcat重启

5、重启服务

先停止tomcat服务。切到bin目录下,直接执行如下命令

shutdown.sh

再启动tomcat服务。

startup.sh

6、浏览器访问项目

直接在浏览器中输入http://ip:port/xxx 即可,如果成功跳转页面(前端项目页面这你肯定是知道的吧),则表示服务器部署前端项目就已大功告成。比如我的:http://10.10.10.10:9011/review-web/#/Login,即可访问到我的Vue项目。

如下是我实际开发中项目login首页截图:

好啦,以上就是这期文章的所有内容,如果对以上内容有任何疑问,还请评论区留言告诉我,bug菌会第一时间为你排忧解难。

四、文末??:

如果你还想要学习更多,小伙伴们大可关注bug菌专门为你们创建的专栏《vue.js实战教学》都是我一手打下的江山,持续更新中,希望能帮助到更多小伙伴们。

我是bug菌,一名想走??出大山改变命运的程序猿。接下来的路还很长,都等待着我们去突破、去挑战。来吧,小伙伴们,我们一起加油!未来皆可期,fighting!

最后送大家两句话,与诸君共勉!


做你想做的人,没有时间限制,只要愿意,什么时候都可以start,

??你能从现在开始改变,也可以一成不变,这件事,没有规矩可言,你可以活出最精彩的自己。


??如果文章对您有所帮助,就请留下您的吧!(#.#);

??如果喜欢bug菌分享的文章,就请给bug菌点个关注吧!(′‵)づ╭~;

??如果对文章有任何疑问,还请文末留言或者加群吧【QQ交流群:708072830】;

??鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复参与讨论(请勿发表攻击言论,谢谢);

??版权声明:原创不易,转载请附上原文出处链接和本文声明,版权所有,盗版必究!!!谢谢。

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408144.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React中CodeMirror插件的使用及封装

目录 一、CodeMirror是什么 二、React中CodeMirror的基本使用介绍 &#xff08;一&#xff09;引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 &#xff08;二&#xff09;引入文件配置 &#xff08;三&#xff09;关键属性解读 1.value 2.mode 3.the…

Vue3 从零开始 搭建 简单 干净 的 后台管理系统

前言&#xff1a; 记得自己大二时&#xff08;2017年&#xff09;&#xff0c;想搭建一个后台管理系统&#xff0c;当时头脑想的是用原生JS写的。我肯定干不出来&#xff0c;后来乖乖用了当时比较流行的layui&#xff0c;就算现在也真的难以做下去。 这几天&#xff0c;有了需…

微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中

一、表单数据发送到数据库 1. 利用bindsubmit来写一个函数 <form bindsubmit"bindSubmit"><view class"form_border"><label>收件人名称:</label><input name"userName" auto-focus placeholder" 请填写收件…

【Java编程指南】语法基础

目录 一、前言 二、关键字 三、数据类型 1.存储单元 2.存储范围 3.类型转换 四、常量 五、变量 六、标识符 七、注释 一、前言 学习目标 1&#xff1a;熟悉Java的关键字、数据类型&#xff08;包括范围&#xff09;、常量与变量的区别 学习目标 2&#xff1a;类型转…

Java项目中利用飞书自定义机器人Webhook向飞书群推送告警通知

今天来看一下如何在Java项目中利用飞书的自定义机器人Webhook向飞书群推送告警通知 一、功能场景 企业存在给特定群组自动推送消息的需求&#xff0c;比如&#xff1a;监控报警推送、销售线索推送、运营内容推送等。 你可以在群聊中添加一个自定义机器人&#xff0c;通…

vue-print 实现打印功能

目录一、安装1. Vue22. Vue3二、基本使用1. 直接打印页面HTML2. 个性化设置3. 打印URL三、API一、安装 1. Vue2 npm install vue-print-nb --saveimport Print from vue-print-nb // Global instruction Vue.use(Print);//or// Local instruction import print from vue-pri…

选 择 器

目录 1、三种基本选择器&#xff08;重要&#xff09; &#xff08;1&#xff09;基本选择器 &#xff08;2&#xff09;类选择器 class &#xff08;3&#xff09;id选择器 2、层次选择器 &#xff08;1&#xff09;后代选择器 &#xff08;2&#xff09;子选择器 &am…

【JavaScript速成之路】JavaScript内置对象--数组对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言数组对象1&#xff0c;数组类型检测2&#xff0c;数组元素增删3&#xff0c;…

【面试题】面试官:如果后端给你 1w 条数据,你如何做展示?

最近一位朋友参加阿b的面试&#xff0c;然后面试官问了她这个问题&#xff0c;我问她咋写的&#xff0c;她一脸淡定的说&#xff1a;“虚拟列表。”大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面…

canvas简易使用教程

简介:<canvas> </canvas> 是 HTML5 新增的&#xff0c;一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及…

FilterChain(过滤器链)详解

在一个 Web 应用程序中可以注册多个 Filter 程序&#xff0c;每个 Filter 程序都可以针对某一个 URL 进行拦截。如果多个 Filter 程序都对同一个 URL 进行拦截&#xff0c;那么这些 Filter 就会组成一个Filter 链&#xff08;也称过滤器链&#xff09;。 Filter 链用 FilterCh…

vue获取文件流(视频流、音频流、图片流)数据并将其回显展示

前言 这几天深受数据回显的折磨&#xff0c;级联选择器的回显还没想出怎么弄&#xff0c;又碰到了文件流的回显&#xff0c;主要第一次接触&#xff0c;看着一堆乱码&#xff0c;连是什么问题都不懂&#xff0c;后面通过查阅一天的资料&#xff0c;总结了一下方法&#xff0c;…

Axure教程-新手入门基础(小白强烈推荐!!!)

Axure教程-新手入门基础(小白推荐) 1.Axure软件介绍 Axure RP是一款专业的快速原型设计工具。Axure&#xff08;发音&#xff1a;Ack-sure&#xff09;&#xff0c;代表美国Axure公司&#xff1b;RP则是Rapid Prototyping&#xff08;快速原型&#xff09;的缩写。 Axure RP的…

Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试

&#x1f482; 个人网站:【 海拥】【小霸王游戏机】&#x1f91f; 风趣幽默的前端学习课程&#xff1a;&#x1f449;28个案例趣学前端&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&…

layui最新版本更新已全面拥抱Vue3,layui - vue是一套Vue 3.0的桌面端组件库,提供100%的layui的体验;

layui - vue目前的版本是1.4.9&#xff0c;目前常用的大部分组件已全部覆盖&#xff0c;最惊喜的地方在动画和过度组件做的比较好&#xff0c;应该是目前Vue组件库里面做的比较好的&#xff0c;Vue的动画相比于React和Angular一直比较弱,layui - vue目前做的不错&#xff0c;目…

前端中的BFC是什么?

BFC的概念 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域&#xff0c;只有Block-level box参与&#xff0c; 它规定了内部的Block-level Box如何布局&#xff0c;并且与这个区域外部毫不相干。 MDN给出的解释是&#xff1a;BFC是…

【docker基础操作命令】(一)启动命令和镜像命令

文章目录docker启动命令1. 启动docker2. 关闭docker3. 重启docker4. 查看docker运行状态5. 设置docker开机自启动6. 查看docker信息7. 查看docker的帮助文档docker镜像命令1. 显示当前docker下的所有镜像2. 从远程仓库查看指定名称的镜像3. 下载镜像到本地4. 查看镜像/容器/数据…

分布式ELK日志监控系统环境搭建

文章目录1.1为什么需要监控项目日志1.2ELK日志监控系统介绍1.3ELK的工作流程1.4ELK环境搭建1.4.1Elasticsearch的安装1.4.2Kibana的安装1.4.3Logstash的安装1.4.4数据源配置1.4.5日志监测测试1.1为什么需要监控项目日志 项目日志是记录项目运行过程中产生的事件和信息的重要工…

web前端开发和后端开发哪个难度大?

前言 因为涉及到的具体的应用的领域不同&#xff0c;所以说不能简单地说哪一个难&#xff0c;对于前端而言你会感觉到入门会非常的简单&#xff0c;这也是会给许多人一种错觉&#xff0c;前端很简单&#xff0c;但是只能说是在入门理解上是有利于新手的&#xff0c;前端在主要…

Python tkinter(GUI编程)模块最完整教程(上)

提示&#xff1a;下滑文章左侧可以查看目录&#xff01; 1 走进tkinter世界 1.1 认识tkinter tkinter是一个GUI开发模块&#xff0c;是Tcl/Tk语言在Python上的接口&#xff0c;可以在大部分操作系统上运行。tkinter非常的简单而且好用。tkinter模块是自带的Python模块&#…