idea里有vue项目有springboot项目，怎样把vue和项目同时启动能使vue前端项目访问到后端举例说明

在 IntelliJ IDEA 中同时启动 Vue.js 前端项目和 Spring Boot 后端项目需要采取多模块方式，以确保两个项目可以协同工作。以下是一种常见的方式：

1. 创建一个父项目 ：

   首先，创建一个 Maven 父项目，该父项目将包含两个子模块，一个用于 Vue.js 前端，另一个用于 Spring Boot 后端。

2. 创建前端 Vue.js 项目子模块 ：

   在父项目下创建一个子模块，该子模块用于托管 Vue.js 项目。可以使用 Vue CLI 创建一个新的 Vue.js 项目。

   bash

   vue create frontend

   进入创建的 Vue.js 项目目录：

   bash

   cd frontend

3. 创建后端 Spring Boot 项目子模块 ：

   同样，在父项目下创建另一个子模块，用于托管 Spring Boot 项目。

   创建 Spring Boot 项目，可以使用 Spring Initializr（https://start.spring.io/）或者使用 Spring Boot CLI。

   bash

   spring init -dweb,data-jpa -gcom.example -abackend backend

   进入创建的 Spring Boot 项目目录：

   bash

   cd backend

4. 调整项目结构 ：

   在 IntelliJ IDEA 中打开父项目。

   将前端和后端两个子模块拖拽到父项目中，形成父子关系。

5. 配置前端项目的启动 ：

   打开前端 Vue.js 项目，找到 package.json 文件，添加一个 start 脚本：

   json

   "scripts": {"serve": "vue-cli-service serve", "start": "vue-cli-service serve --mode development"}

6. 配置后端项目的启动 ：

   打开后端 Spring Boot 项目，找到 Application.java 文件，右键点击选择 “Run”。

7. 启动项目 ：

   在 IntelliJ IDEA 中，可以选择 Run > Run ‘backend’ 和 Run > npm serve 来分别启动后端和前端项目。

   或者可以通过 Maven 插件在父项目根目录执行如下命令，一次启动两个子模块：

   bash

   mvn spring-boot:run

   此时，前端项目可以通过 http://localhost:8080 访问，后端 API 可以通过 http://localhost:8080/api 访问。

确保前端项目的 API 调用路径正确配置，以能够访问到后端 API。这样，前后端就可以同时启动并进行协同工作。