SpringBoot后端框架整合前端Vue系统框架

SpringBoot后端框架整合前端Vue系统框架

---

本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。

---

在IDEA中整合前后端框架，实现前后端分离，人不分离，方便项目开发。此外，也可使用IDEA完成SpringBoot后端框架开发，vscode完成Vue前端框架开发。

---

复制生成的Vue前端框架至SpringBoot后端框架文件目录中，前后端项目统一在IDEA中进行开发。

---

在IDEA中打开，等待生成索引：
导入完成：

配置前端vue框架快捷启动：

点击 Edit Configurations

---

点击 + 选择 npm:

---

配置如下三项：

package.json： 点击下拉框选择自动生成的.json
Command： npm
Scripts： serve

之后点击 OK，生成快捷启动项：

---

为了方便，可以设置启动后自动加载 vue前端界面；

打开 vue项目 中的 vue.config.js
复制、粘贴替换为如下内容：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,

  devServer: {
    //设置主机地址
    host:'localhost',
    //设置默认端口
    port:8080,
    // 设置自动打开浏览器
    open:true

  }
});

点击绿色三角，启动vue前端项目：

---

自动打开浏览器显示vue前端界面内容：

vue前端系统启动成功！！！

---

在相同位置，选择 xxxApplication 启动 SpringBoot 后端框架：

---

在浏览器输入

http://localhost:8090/

显示如下内容：

---

SpringBoot后端框架 整合 前端Vue系统框架成功 ！ ！ ！