Vue+SpringBoot前后端分离教程三：Vue整合SpringBoot框架

柔光的暖阳◎ 2023-09-29 12:42 13阅读 0赞

### Vue整合SpringBoot框架 ###

*  一、新建Springboot模块
 *  二、分别运行vue和springboot

# 一、新建Springboot模块 #

**（1）先在文件中找到new然后选模块**  
![在这里插入图片描述][c58aaacfa4c0493a9ddd7de307dda245.png]  
**（2）选择Spring Initializr 然后这里推荐用阿里的镜像源**

在Custom中填入下面的阿里镜像源地址：

> `https://start.aliyun.com/`

![在这里插入图片描述][9366e72318f4480391414a2d8875c257.png]  
这里可以直接下一步，当然你也可以修改包名和项目名称  
![在这里插入图片描述][32c7f61812b04a84b26acbf7773733b2.png]

**（3）然后下面来选择一些开发所需要的工具**

![在这里插入图片描述][8fb02d9f1e91483092064e09b4f9e38d.png]  
![在这里插入图片描述][c10699a6ff2c42f2b8f36d598d9c3db9.png]  
![在这里插入图片描述][c957a242f3aa4030a5f7416afa5f566c.png]  
**（4）修改工程路径**

这里可以自定义项目的名称，然后推荐把这个项目的根目录改成和vue项目根目录同一个，这样vue和springboot就同级了  
![在这里插入图片描述][43e374e26ba24fa3b9e84527826c6424.png]  
如下图所示改成与vue项目同级目录下  
![在这里插入图片描述][86ec245bbd2a47b9b41fa9f70d24d900.png]  
这样两个模块在同一级目录下看起来就不会这么混乱了，操作也方便一些  
![在这里插入图片描述][2fbff6a0dacc4283ae7a532de03c7e8b.png]

# 二、分别运行vue和springboot #

由于vue和springboot此时默认的端口都是8080所以会有冲突，我们可以修改其中一个来实现分别启动

> 在vue项目根目录下找到vue.config.js文件，并修改为下面的代码：

const {
         defineConfig } = require('@vue/cli-service');
    
    module.exports = defineConfig({
        
      transpileDependencies: true,
      devServer:{
        
        port:80, // 启动端口号
        // open:true  // 启动后是否自动打开网页
      }
    });

> springboot的配置文件则是在 src > main > resources 中

![在这里插入图片描述][339cd029df3149bb9aa270c9cc7dbd82.png]  
我们可以看到这里是有两个启动配置的，我们分别对他们进行启动，springboot是自动配置上去了，如果没有也可以手动配置  
![在这里插入图片描述][548258ebaef34bd299a82592b1bd78fd.png]  
找到下面这个启动类，并点击主类（或者主函数）左边的启动按钮，工具栏中自己动就会有了  
![在这里插入图片描述][b9c0a558877940ab814838a471724fab.png]  
然后我们看到两边都启动成功了

**vue启动结果：**

![在这里插入图片描述][93430bb579464f7b829d390812c84fad.png]  
**springboot启动结果：**  
![在这里插入图片描述][fb698798ddec403592bc25f8336c5824.png]

以上就是在IDEA中整合Vue和SpringBoot的整个过程，下一篇将介绍前后端如何进行数据交互。

**上一篇：**[Vue+SpringBoot前后端分离教程二：在IDEA中运行vue并结合element-plus的使用][Vue_SpringBoot_IDEA_vue_element-plus]

**下一篇：**[Vue+SpringBoot前后端分离教程四：前后端数据交互之Axios][Vue_SpringBoot_Axios]

[c58aaacfa4c0493a9ddd7de307dda245.png]: https://img-blog.csdnimg.cn/c58aaacfa4c0493a9ddd7de307dda245.png
[9366e72318f4480391414a2d8875c257.png]: https://img-blog.csdnimg.cn/9366e72318f4480391414a2d8875c257.png
[32c7f61812b04a84b26acbf7773733b2.png]: https://img-blog.csdnimg.cn/32c7f61812b04a84b26acbf7773733b2.png
[8fb02d9f1e91483092064e09b4f9e38d.png]: https://img-blog.csdnimg.cn/8fb02d9f1e91483092064e09b4f9e38d.png
[c10699a6ff2c42f2b8f36d598d9c3db9.png]: https://img-blog.csdnimg.cn/c10699a6ff2c42f2b8f36d598d9c3db9.png
[c957a242f3aa4030a5f7416afa5f566c.png]: https://img-blog.csdnimg.cn/c957a242f3aa4030a5f7416afa5f566c.png
[43e374e26ba24fa3b9e84527826c6424.png]: https://img-blog.csdnimg.cn/43e374e26ba24fa3b9e84527826c6424.png
[86ec245bbd2a47b9b41fa9f70d24d900.png]: https://img-blog.csdnimg.cn/86ec245bbd2a47b9b41fa9f70d24d900.png
[2fbff6a0dacc4283ae7a532de03c7e8b.png]: https://img-blog.csdnimg.cn/2fbff6a0dacc4283ae7a532de03c7e8b.png
[339cd029df3149bb9aa270c9cc7dbd82.png]: https://img-blog.csdnimg.cn/339cd029df3149bb9aa270c9cc7dbd82.png
[548258ebaef34bd299a82592b1bd78fd.png]: https://img-blog.csdnimg.cn/548258ebaef34bd299a82592b1bd78fd.png
[b9c0a558877940ab814838a471724fab.png]: https://img-blog.csdnimg.cn/b9c0a558877940ab814838a471724fab.png
[93430bb579464f7b829d390812c84fad.png]: https://img-blog.csdnimg.cn/93430bb579464f7b829d390812c84fad.png
[fb698798ddec403592bc25f8336c5824.png]: https://img-blog.csdnimg.cn/fb698798ddec403592bc25f8336c5824.png
[Vue_SpringBoot_IDEA_vue_element-plus]: https://blog.csdn.net/Q1368089323/article/details/124483619
[Vue_SpringBoot_Axios]: https://blog.csdn.net/Q1368089323/article/details/124520138