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

Logo

前往低代码交流专区

更多推荐