tomcat部署vue前端项目

本文档详细介绍了如何在Tomcat服务器上部署Vue项目。首先,在Tomcat的webapps目录下创建一个名为JL的文件夹,然后将Vue项目的dist目录中的static和index.html复制到该文件夹。接着,为了适配服务器环境,需在vue.config.js中修改publicPath为'/JL'。此外,还需根据环境变量设置Vue项目的基础路由配置,确保在生产环境中不出现404错误。最后,通过Tomcat启动项目,完成部署。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Tomcat建立文件夹

1.在webapps文件夹下建立JL文件夹

2.将vue项目中打包好的dist中的static和index.html复制到这个文件夹下

 

Vue项目修改请求的公共路径

1.vue.config.js修改打包时的公共路径 

publicPath: process.env.NODE_ENV === "production" ? "/JL" : "/"

Vue项目修改路由配置

  base:process.env.VUE_APP_BASE_Title,


//----------------------------------
# 页面标题
VUE_APP_TITLE = 聚利巡查管理系统

# 生产环境配置
ENV = 'production'

# 聚利巡检系统/生产环境
VUE_APP_BASE_API = 'http://localhost:6100'

VUE_APP_BASE_Title = 'JL'

 不修改这里会出现404错误

 启动项目

1.用tomcat将项目启动

### 如何在Apache Tomcat部署Vue.js 3单页应用(SPA) #### 准备工作 为了成功地将Vue.js 3构建的应用程序部署Tomcat服务器上,需先完成一些准备工作。确保已经安装并配置好了Node.js环境来构建Vue项目,并且拥有可正常工作的Tomcat实例。 #### 构建Vue.js 3项目 对于基于Vue CLI创建的项目,在项目的根目录下执行命令`npm run build`或`yarn build`以生成生产版本文件,默认情况下这些文件会被放置于`dist/`目录内[^2]。 ```bash npm run build ``` 此过程会依据配置自动优化资源,如压缩JavaScript/CSS代码、提取公共模块等操作,从而得到适合线上发布的静态资源集合。 #### 配置Tomcat Tomcat作为一个流行的Java Servlet容器,同样适用于托管纯静态网站或SPA(single-page application),尽管其更常用于承载Java后端服务。为了让Tomcat正确处理来自前端路由模式下的页面刷新请求而不返回404错误,需要调整web.xml中的设置或者利用rewrite valve特性实现URL重写逻辑[^1]。 如果选择修改`conf/web.xml`的方式,则可以在其中加入如下片段: ```xml <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> ``` 上述配置使得当遇到未找到路径时转向首页加载,进而由前端框架接管后续导航流程;而通过RewriteValve则更加灵活高效,只需编辑`$CATALINA_BASE/conf/server.xml`内的Host节点部分增加以下内容即可生效: ```xml <Valve className="org.apache.catalina.valves.rewrite.RewriteValve"/> ``` 接着在同一级别创建名为`WEB-INF/jk/workers.properties`的文本文件定义转发规则,不过针对简单的SPA场景直接更改web.xml可能更为直观简单些。 #### 将打包后的文件放入Tomcat 把之前提到过的`dist/`整个复制粘贴至Tomcat webapps文件夹下面新建的一个子文件夹里——这个新建立起来的小文件夹名称即代表将来访问该站点所使用的上下文路径(context path)[^2]。例如命名为my-vue-app的话,则可通过http://localhost:8080/my-vue-app/的形式浏览已上线的应用界面。 #### 启动Tomcat验证成果 最后一步自然是启动Tomcat查看实际效果啦!只要一切顺利,就能看到精心打造好的Vue SPA完美呈现在浏览器之中了!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值