springbot+vue项目的打包部署

springbot+vue项目的打包部署

使用vue进行前后端分离式开发，但最终部署还是要将前端放到后端中统一部署。

一、打包

1.前端打包

（1）流程

通常，我们的前端是在 VsCode 中开发的，如果想要打包，只需要 ctrl+shift+U 调出命令行；然后输入

npm run build

 

之后在项目中会自动生成一个 dist 文件夹，只需要将里面的所有文件直接 copy 到Springboot项目的 static 中就可以了；

（2）问题

1.vue 打包部署后， 除了主页，其他页面刷新就会404 not found，并且 接口请求 也是 404

问题原因：除了主页页面，其他刷新404 

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了

解决方法：

去router的index文件中把mode:history注释掉

2.后端打包

把 dist 中的内容 copy 到 static 里面之后，我们就可以后端项目的打包了； 此时我们只需要调出 Maven 的功能按钮，然后按 clean compile package 就可以了；(厚礼点击clean-install打包成功了) 之后可以在控制台输出的路径中去找对应的 JAR 文件，然后再进行部署操作：

遇到的问题

1.我的后端项目分模块开发的，有一个父模块和两个子模块

多模块项目的打包方法：IDEA打包SpringBoot maven项目（包括多模块）_花火66666的博客-CSDN博客_idea maven多模块工程打包

2.对父模块的maven进行clean时报错

[ERROR] Some problems were encountered while processing the POMs: [FATAL] Non-resolvable parent POM for com.bank:pamp:0.0.1-SNAPSHOT: Could not find artifact com.bank:pamp-parent:pom:0.0.1-SNAPSHOT and 'parent.relativePath' points at no local POM @ line 5, column 13 @

解决方法：

先把parent项目pom中的<modules>注释掉再clean install
之解除注释后再clean也可以了

原因：
多模块项目构建时，先将parent项目要先install一回，之后子项目才可以运行mvn compile命令,否则就会报如上异常。

问题3.打包提示：Unable to find main class

修改子模块pom的配置文件 ，设置过滤即可

<plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <skip>true</skip>
                </configuration>
</plugin>

 

解决方法2：将主类所在模块的pom中添加上述plugin，其余模块和主模块中的pom均不要该配置。

完成后

在子模块文件下能找到相应的jar包和war包

二、部署

把打包好的jar文件放到Linux的终端或cmd中运行即可

java -jar Jar文件名
或
java -jar War文件名