vite+vue3实现 tomcat 的本地部署

背景:

        很多开发小伙伴在本地开发完前端项目后,碍于服务端环境配置麻烦,想先试试在本地部署,已开发好的前端项目,由于很多文章都是文字性描述,不太直观,为了给大多数新手提供一个教程,本文手把手教你如何在本地实现tomcat部署前端项目。

1、把项目中vite.config.js文件中的base修改为项目名称

       例如:    base:'/shop-admin/',

 

2、有些小伙伴的路由可能需要修改

     如果项目的router配置hisroty,则需要修改成:history: createWebHistory(‘项目名’)形式。由于我的路由没有那么配置,就不截图了。

3、执行打包命令

npm run build

4、打完包项目目录会出现dist目录

5、复制dist目录到tomcat(widows本地安装tomcat这里就不说明,请自行百度)的webapps下,且把dist目录修改成刚才第一步配置shop-admin

  例如我的tomcat路径:  E:\tomcat\apache-tomcat-7.0.72\webapps

6、然后在shop-admin目录下增加目录WEB-INF,同时目录中添加web.xml文件,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1" metadata-complete="true"><display-name>Router for Tomcat</display-name><error-page><error-code>404</error-code><location>/index.html</location></error-page>
</web-app>

7、重启tomcat

8、浏览器输入地址访问

     例如我的访问地址为: http://localhost:8080/shop-admin/LonginPage

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

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

相关文章

企业文件防泄密方法

企业文件防泄密方法 安企神数据防泄密系统下载使用 企业文件是企业的核心资产&#xff0c;其中可能包含大量的敏感信息&#xff0c;如客户资料、产品配方、财务数据等。一旦这些文件泄露&#xff0c;可能会给企业带来不可估量的损失。 然而&#xff0c;企业文件防泄密是确保…

好用的API调试工具推荐:Apipost

随着数字化转型的加速&#xff0c;API&#xff08;应用程序接口&#xff09;已经成为企业间沟通和数据交换的关键。而在API开发和管理过程中&#xff0c;API文档、调试、Mock和测试的协作显得尤为重要。Apipost正是这样一款一体化协作平台&#xff0c;旨在解决这些问题&#xf…

mulesoft开发支撑

mulesoft开发支撑 开发支撑1. raml语法说明2. dataweave在线测试平台3. dataweave基础语法4. dataweave官方指南 感 开发支撑 1. raml语法说明 点击跳转 raml-10.md 重点看下面这部分内容&#xff0c;对raml语法做了详细说明和举例。 2. dataweave在线测试平台 点击跳转 d…

JavaEE-博客系统1(数据库和后端的交互)

本部分内容包括网站设计总述&#xff0c;数据库和后端的交互&#xff1b; 数据库操作代码如下&#xff1a; -- 编写SQL完成建库建表操作 create database if not exists java_blog_system charset utf8; use java_blog_system; -- 建立两张表&#xff0c;一个存储博客信息&am…

【Java】多线程案例(单例模式,阻塞队列)

> :heart: Author&#xff1a; 老九☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 实现安全版本的单例模式饿汉模式类和对象的概念类对象类的静态成员与实例成员 懒汉模…

vulnhub靶机Venus

下载地址&#xff1a;The Planets: Venus ~ VulnHub 主机发现 arp-scan -l 端口扫描 nmap --min-rate 1000 -p- 192.168.21.132 端口版本扫描 nmap -sV -sT -O -p22,8080 192.168.21.132 对于http-alt HTTP Alternative Services 介绍 | JerryQu 的小站 (imququ.com) 总结…

课题学习(九)----阅读《导向钻井工具姿态动态测量的自适应滤波方法》论文笔记

一、 引言 引言直接从原论文复制&#xff0c;大概看一下论文的关键点&#xff1a; 垂直导向钻井工具在近钻头振动和工具旋转的钻井工作状态下&#xff0c;工具姿态参数的动态测量精度不高。为此&#xff0c;通过理论分析和数值仿真&#xff0c;提出了转速补偿的算法以消除工具旋…

亿图导出word和PDF中清晰度保留方法

步骤一 在亿图软件中画一个元件大小搭配合理的图。注意字体大小的安排&#xff0c;尤其是角标的大小要合适&#xff0c;示范如下 选中所有元器件&#xff0c;右键使用组合功能将电路图组合为一个整体 步骤二&#xff1a; 将亿图软件中的图保存为SVG格式。示范如下 在导出到…

数据防泄密软件排行榜

数据防泄密软件排行榜 安企神数据防泄密系统下载使用 现如今&#xff0c;随着信息技术的快速发展&#xff0c;数据泄密事件屡见不鲜。企业的隐私数据面临着越来越大的风险。为了保护数据的安全&#xff0c;数据防泄密软件应运而生。这些软件通过加密、监控和防护等功能&#…

数据结构例题代码及其讲解-图

01 图的邻接矩阵存储结构定义。 顶点表、边&#xff08;二维数组&#xff09;、顶点数量和边的数量 typedef struct MGraph {char Vex[MaxSize];//顶点(vertex)中数据int Edge[MaxSize][MaxSize];//边int vexnum, arcnum;//顶点数量和边的数量 }MGraph;图中涉及到.和->的区…

golang中的Interface接口 类型断言、接口赋值、空接口的使用、接口嵌套

Interface整理 文章目录 Interface整理接口嵌套接口类型断言类型判断 type-switch使用方法集与接口空接口实例 接口赋值给接口 接口是一种契约&#xff0c;实现类型必须满足它&#xff0c;它描述了类型的行为&#xff0c;规定类型可以做什么。接口彻底将类型能做什么&#xff0…

openGauss学习笔记-109 openGauss 数据库管理-管理用户及权限-角色

文章目录 openGauss学习笔记-109 openGauss 数据库管理-管理用户及权限-角色109.1 创建、修改和删除角色109.2 内置角色 openGauss学习笔记-109 openGauss 数据库管理-管理用户及权限-角色 角色是一组用户的集合。通过GRANT把角色授予用户后&#xff0c;用户即具有了角色的所有…

4.1 网络基础之网络IO

一、编写基本服务程序流程 下面介绍一个最最简单的服务程序的编写流程&#xff0c;先按照顺序介绍各个函数的参数和使用。然后在第三节用一对简单的程序对客户端与服务端通信过程进行演示。下面所有代码均在linux平台实现&#xff0c;所以可能与windows上的编程有所区别&#…

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-远程桌面屏幕监控

红队专题 招募六边形战士队员[24]屏幕监控-(1)屏幕查看与控制技术的讲解图像压缩算法图像数据转换其他 [25]---屏幕监控(2)查看屏幕的实现7.1 屏幕抓图显示7.7 完善主控端 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 [24]屏幕监控-(1…

vue源码分析(五)——vue render 函数的使用

文章目录 前言一、render函数1、render函数是什么&#xff1f; 二、render 源码分析1.执行initRender方法2.vm._c 和 vm.$createElement 调用 createElement 方法详解&#xff08;1&#xff09;区别&#xff08;2&#xff09;代码 3、原型上的_render方法&#xff08;1&#xf…

37基于MATLAB平台的图像去噪,锐化,边缘检测,程序已调试通过,可直接运行。

基于MATLAB平台的图像去噪&#xff0c;锐化&#xff0c;边缘检测&#xff0c;程序已调试通过&#xff0c;可直接运行。 37matlab边缘检测图像处理 (xiaohongshu.com)

大语言模型在天猫AI导购助理项目的实践!

本文主要介绍了Prompt设计、大语言模型SFT和LLM在手机天猫AI导购助理项目应用。 ChatGPT基本原理 “会说话的AI”&#xff0c;“智能体” 简单概括成以下几个步骤&#xff1a; 预处理文本&#xff1a;ChatGPT的输入文本需要进行预处理。 输入编码&#xff1a;ChatGPT将经过预…

Java毕业设计 SpringBoot 新能源充电桩管理系统

Java毕业设计 SpringBoot 新能源充电桩管理系统 SpringBoot 新能源充电桩管理系统 功能介绍 管理员 登录 验证码 注册 系统用户管理 普通用户管理 通知公告管理 留言管理 充电站管理 充电桩管理 充电桩预约 充电管理 订单管理 修改密码 普通用户 登录 修改个人资料 通知公告…

虹科分享|确保冻干工艺开发中精确测量和数据完整性的5步指南

文章来源&#xff1a;虹科环境监测技术 阅读原文&#xff1a;虹科分享 | 确保冻干工艺开发中精确测量和数据完整性的5步指南 一、介绍 冻干周期的工艺开发在冻干中起着至关重要的作用&#xff0c;因为它可以优化关键工艺参数&#xff0c;以实现理想的产品质量和工艺一致性。优…

MappingMongoConverter原生mongo 枚举类ENUM映射使用的是name

j.l.IllegalArgumentException: No enum constant com.xxx.valobj.TypeEnum.stringat java.lang.Enum.valueOf