tomcat部署vue前端项目

原创已于 2022-05-12 10:04:12 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#tomcat #java

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

Vue开发专栏收录该内容

21 篇文章

订阅专栏

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

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'