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

已于 2023-08-09 14:42:15 修改
阅读量9.1k 收藏 37
点赞数 11
分类专栏： 高质量硬核实战(全栈版) 文章标签： vue.js vue打包部署 vue打包dist dist部署 tomcat部署
于 2022-03-24 19:01:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43970743/article/details/123718221
版权
本文详述了如何将Vue3 + Vite + TS项目通过npm run build打包，并在CentOS7.6服务器上安装Tomcat8.5.5进行部署。重点介绍了修改Tomcat默认根目录以避免静态资源404错误的方法，以及成功部署后的访问步骤。
摘要由CSDN通过智能技术生成

👨‍🎓作者：bug菌

✏️博客：CSDN、掘金等

💌公众号：猿圈奇妙屋

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

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

一、项目背景🔥

前端项目：vue3 + vite + ts

二、 前言🔥

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bug菌¹
关注
专栏目录
订阅专栏
手把手教学使用宝塔面板部署前后端分离项目（全面详细）
黄团团的个人博客
07-01 5491
平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。
前端部署流程详解
m0_52973251的博客
08-10 1216
作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码 html，css，js。这样的话你在服务器的这个路径上上传dist之后，你容器里面的 /etc/nginx/conf.d 这个路径下就会同时挂载上dist文件夹。2.复制配置文件(为什么以这种方式复制配置文件，详细看下面403问题博客，这个博主写的很清楚)结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。这个一般就是nginx的配置文件你写错了。
前端打包运行dist的三种方法
最新发布
missCheney的博客
07-16 948
前端运动部署dist的三种方法总结
vue项目打包发布与dist瘦身
qq_45532769的博客
10-31 1345
vue项目打包发布dist瘦身
Vue项目的打包方式（生成dist文件）
热门推荐
商务合作 | 共同学习 | 携手共进
12-30 15万+
打包vue项目，生成dist文件夹。
2024前端面试题汇总（更新中）(1)，今日头条公司面试问题
HUAXIAL的博客
04-13 671
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。if(newArr.indexOf(arr[i]) == -1) {//如果找到不到就把arr[i]放到新数组newArr里。if(max_num
vue项目打包dist发版随笔
LiXueFu727224204的博客
12-27 1254
vue项目打包dist
Jenkins部署前后端分离项目最全图文教程（手把手教学）
黄团团的个人博客
07-20 3168
最近Jenkins部署的热度比较高，于是就想出一篇关于我是如何使用Jenkins部署前后端分离项目的，本篇记录了我是如何一步一步去配置、搭建和部署的完整流程，每一行代码都进行了实测和讲解，通过图文的教学写成博客分享给大家！
【Vue】把工程项目打包成dist项目文件
【敦厚的曹操】的专栏
06-11 758
【Vue】把工程项目打包成dist项目文件
vue配置生成打包文件dist
weixin_53571730的博客
04-21 687
Vue项目的打包方式（生成dist文件）_m0_54850604的博客-CSDN博客_vue项目打包成dist
创建的vue项目--打包
醉殇姒若梦遗年 ツ的博客
01-30 2733
自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-01 4796
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
运行vue打包的dist文件
小郑要做干饭人的博客
12-06 6558
npm install -g serve(全局安装) serve -s dist(运行打包后的文件) 若npm安装失败,请移步:node.js安装失败解决方法
vue项目本地打包测试，本地运行dist文件夹
团酱
05-17 1378
根目录下创建 .env.development .env.production .env.staging。
【vue项目本地打包测试，本地运行dist文件夹】
General_D的博客
09-28 1991
vue项目打包：npm run build //或者 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 本地虚拟服务依赖下载：npm install http-server -g 在对应生成的打包文件夹dist文件夹运行命令 http-server 复制地址到浏览器就可以啦~
vue vue3直接运行dist打包文件
qq_44871531的博客
04-01 1047
【代码】直接运行dist打包文件。
webpack4手把手教你搭建vue项目
"这篇教程详细介绍了在9102年使用webpack4搭建Vue项目的步骤，适合初学者和希望深入理解webpack配置的开发者。通过实践，读者将了解到如何从零开始创建一个Vue项目，包括初始化项目、安装依赖、配置webpack以及创建...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌¹

你的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值