tomcat部署vue前端项目

智江鹏

已于 2022-05-12 10:04:12 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue开发文章标签： tomcat java

于 2022-05-05 13:24:59 首次发布

本文链接：https://blog.youkuaiyun.com/zxc472504515/article/details/124586802

Vue开发专栏收录该内容

21 篇文章

订阅专栏

本文档详细介绍了如何在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'