将springboot和Vue整合在一起的方法

前两天老大让我把Vue和springboot工程耦合在一起，然后打成一个包部署。。。众所周知，Vue的出现就是为了前后端分离，但是为了继续在这里搬砖，只能想办法解决这个问题。经过尝试结果之后，方法如下，供各位参考

准备工作

打包Vue脚手架工程

打包前的准备

1.找到你的Vue工程，在工程目录下有一个build的文件夹，其中有一个utils.js的文件，点进去，将下图中画红圈圈的地方改成如图所示：

这个操作是避免部署之后访问页面时图标丢失（啥也别说了，全是眼泪啊）一定要改成相对路径，如果不改，部署在服务器时，路径不认，所以图标出不来
2.还是改路径的问题，在工程文件夹目录中有一个config的文件夹，点开它。找到一个叫index.js的文件，点开它，更改设置如下图：

**"/"–>改成"./"**如果是绝对路径的话最后部署之后页面不出

开始打包

首先找到你的Vue工程，这里我就用命令行进行演示（或者你也可以在编辑器中直接使用预设好的命令进行打包）进入到你Vue工程所在的目录下，输入npm run build 开始打包，如下图：

命令运行后，如果成功会出现如下的图：

这时候你就已经打包成功了，然后在你Vue的工程文件目录下会出现一个dist文件夹，这个文件夹里面包含两个文件,第一个是static，这个里面是存放你打包后的css文件和js文件，另一个是index.html文件，这个文件是你Vue所有组件的入口，如下图：

修改跨域

由于工程已经前后台耦合了，所以之间的跨域配置就可以舍弃掉了

将前台打包文件放入后台生成war包

全都弄好后，将Vue工程中的dist文件中的static和index.html复制到spirngboot工程中的static目录下注意：不是dist整个文件夹放到后台的static目录下，只复制里面的两个文件就好了，这个时候就可以直接Run项目了，打成war包

本机测试方式

扔到Tomcat的webapps下，启动Tomcat 然后在浏览器能访问就可以了，这时候你交给实施人员，剩下的交给他们吧