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。这样，前后端就可以同时启动并进行协同工作。