最近碰到有人问如何将SpringBoot和Vue进行打包部署到Tomcat服务器，由于Vue接触不是很久所以我自己也感兴趣是如何打包部署到本地或者远程服务器上（云端）。恰好手上也有一个案例需要部署到远程Tomcat空间，琢磨了一点时间总算是搞清楚一些了，分享给大家！

PS: 网上太多说如何打包部署的，但是真的没有说清楚都是说了个大概，还有很多都是抄袭他人也不管是否正确，所以只有自己亲自验证才懂得！

关于SpringBoot项目的搭建，这里就不再啰嗦，有不会的请自己去百度或购买书籍学习了。现在假设我们的项目已经写好了，需要进行部署，以这个为条件来说明。

实施环境：采用前端Vue + 后端SpringBoot 项目是前后分离的，一个工程，如下图：

随便使用一个案例作为介绍（Vue和项目在一起）前后分离方式

Maven管理

打包部署方式一：

后端打包成Jar包（默认方式），在本地电脑上通过 Java -jar xxxxxxx.jar 命令进行运行。操作如下：

POM默认情形下就是Jar打包，也可以加入 <packaging>jar</packagin>显式指明，点击右边Maven侧栏，如下图：

双击，就可以进行打包（项目均按照创建的时候，自动生成的设置来完成）。如果没有问题，打包成功，会出现target目录，展开有打包好的jar文件，如下图：

展开如下，要想名字看起来舒服点，在build里面加入 finalName 就可以，如下图：

打包就完成了，通过Java命令来运行，前端访问即可。

打包部署方式二：

将后端打包成War包，让后将war文件部署（拷贝）到本地Tomcat服务器里，位置为：webapps文件夹下即可。区别不是很大，打包方式为 war 。看图：

由于SpringBoot内嵌了9.0Tomcat，所以需要排除，由外部Tomcat负责运行：

或者改为加上下面依赖（二选一）：

双击 Maven 的 packaging 运行打包即可（最好先运行 clean ）：

将 war 文件拷贝到 Tomcat 目录的 webapps 文件夹里即可。会自动扫描部署：

前端继续保持serve运行，可以访问。

部署方式三（重点）：

由于前后分离，前端一个服务，后端一个服务，也就是开了两个服务。总不能说要运行的时候，还要单独把前端开启吧，所以如何将2个合并在一起部署到本地或者远程服务器，这个才是重点！

有个前提大家要理解：合并以后项目只有一个了，所以就不会存在跨域的问题，所以重点就是前端的设置才是重点。

按照以下步骤可以顺利的解决这些问题：

1. 前端里，将vue.config.js文件里的跨域注释掉，并且加入publicPath : '访问路径' 这点很重要，如图：

2. 将前端里所有请求前面的 /api/xxxx 都删除为只留下 xxxx 即可，如图：

3. 打包前端内容： npm run build

打包后会生成一个 “dist” 的文件夹，里面就是要合并到后端里的静态文件，

4. 将里面的内容全部拷贝到后端的 resources目录下的 static 文件夹里即可。

5. 打包后端为 war 包，拷贝到 Tomcat 的 webapps 目录下即可。

大家可以按照上面的方法去做下，看是否能成功，亲自测试没有问题。

如果是部署到云端的话，前端 publicPath 一定是为 “/” 否则访问不到哦！

希望对大家有作用，有疑问的地方可以留言。

SpringBoot + Vue打包部署到本地和远程服务器相关推荐

maven小节，Nexus私服，构件打包发布，动态资源过滤，自动部署到本地或远程服务器...
为什么80%的码农都做不了架构师?>>> 阅读此文的前提,对Maven 有一定了解,熟悉pom文件基础 1:Nexus 建立私服去下载nexus的war包格式的,最新版本的要 ...
SpringBoot项目打包部署到其他电脑或者服务器上运行
一.准备工作 1.根据部署要连接的数据库,修改项目中Mysql连接的ip和端口号: 2.根据服务器已开放的端口,修改项目中application.yml文件中server.port: 3.在Pom文件 ...
vue打包放到java中启动_Springboot+Vue打包部署总结
文章目录一.Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目二.Springboot打包+部署 1.打包(mvn clean package) ...
vue 打包部署在 nginx服务中，以及出现的一些问题
首先来说操作步骤前提: 1.你已经安装/下载好 nginx 2.你的vue 项目已经打包完成,并得到了 dist 文件夹部署开始: 1.vue 项目打包,在控制台输入 npm run build ...
Vue打包部署到服务器-找不到静态资源404错误
Vue打包部署到服务器-找不到静态资源404错误参考:https://blog.csdn.net/AnnaF/article/details/105709569 问题描述在本地运行正常,但是使用n ...
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...
Vue打包部署到Tomcat
Vue打包部署到Tomcat 一,在config-->index.js中,设置build更改 assetsPublicPath: '/'为assetsPublicPath: './' modu ...
Vue打包部署IIS无法请求
ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开第二步,点击 Server Proxy Settings 第三步,选中应用 Vue打包部署配置URL重写规则 ...
vue打包部署服务器，背景图片显示空白
vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...

SpringBoot + Vue打包部署到本地和远程服务器

Maven管理

部署方式三（重点）：

SpringBoot + Vue打包部署到本地和远程服务器相关推荐

最新文章

热门文章