vue-cli+SSM项目部署到远程服务器Tomcat

最新推荐文章于 2024-04-26 22:47:24 发布

原创

最新推荐文章于 2024-04-26 22:47:24 发布 · 702 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #web

本文详细介绍了如何将前后端分离的Vue-CLI项目和SSM项目部署到远程服务器上的Tomcat。主要步骤包括：在服务器上创建文件夹，SSM项目打成war包上传，Vue-CLI项目修改router/index.js和config/index.js的配置，添加axios请求路径，创建WEB-INF目录并配置web.xml，打包Vue项目时加入WEB-INF，最后重启Tomcat并访问应用。

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

vue-cli+SSM项目部署到远程服务器Tomcat

前后端分开部署

前后端分开部署

项目采用前后端分离的方式开发，在本地已经调通的情况下发布到服务器tomcat上。

准备工作

在服务器上安装配置好tomcat，然后进入目录 tomcat/webapps/ 下先创建一个文件夹：myVue ，待会儿将分别放入配置打包后的前端项目文件

1.SSM项目部署到Tomcat

参考：https://blog.youkuaiyun.com/guanbingchichi/article/details/106854601
打成war包以后传到服务器 tomcat/webapps/ 目录下，比如后端项目为 mySSM.war

2.vue-cli项目部署到Tomcat

打包发布前需要修改的文件有以下几个

router/index.js

base的参数就是刚刚在 tomcat/webapps 的前端项目文件夹名称：

// 创建router实例
export default new Router({
   
   
  mode: 'history', // 消去#
  base: '/myVue/', // 项目名称，也就是在tomcat/webapps/项目名称
  routes: menu // 传入router配置
})

config/index.js

assetsPublicPath也是在 tomcat/webapps 下创建的前端项目文件夹名称：

build: {
   
   
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),