前后端分离的springboot+vue项目打包教程

SpringBoot项目打包

注意：打包springboot项目之前需要保证项目本身能够运行，接口能够正常的收发数据。

之后点击IDEA下方的Teminalz，在其中输入打包命令

代码语言：javascript

AI代码解释

mvn clean install -Dmaven.test.skip

等待打包流程执行完毕，出现如下图片之后表示打包成功！

之后可以在项目的根目录下找到target文件夹，在其中就可以看到刚刚打包好的jar包文件，

测试JAR包运行

在jar包所在的目录下打开cmd命令行，输入命令运行：

代码语言：javascript

AI代码解释

java -jar xxx.jar

如果jar包正常启动，那么就是正常的。

以上就是打包springboot项目的流程，之后是打包前端vue项目，

打包vue项目：

打包vue项目时同样是使用命令行的方式，

在上面同样的位置输入vue项目的打包命令

代码语言：javascript

AI代码解释

npm run build

等待出现如下界面时就表示打包完成了，

与springboot项目不同，vue项目打包完成之后是在文件根目录下生成一个dist文件夹。

[外链图片转存中…(img-iS0Fji4X-1653821399468)] 其中的index.html就可以直接进入到项目界面。

注意在这里可能会有一个小问题就是网站的主界面了，static中存放的是项目的资源文件。 点击index.html就可## 以直接进入到项目界面。

注意在这里可能会有一个小问题

vue打包运行为空解决：

很多小伙伴在打包好vue项目之后，打开index.html文件会显示空白，查看报错会显示如下的报错：

在这种情况下一班都是打包的时候，没有将资源文件放行引起的，解决方法是：

首先找到vue项目下的config/index.js文件，将其中生产环境下的assetPublicPath的路径改为“./”即可，

之后再次执行打包即可。