idea里有vue项目有springboot项目,怎样把vue和项目同时启动能使vue前端项目访问到后端举例说明
在 IntelliJ IDEA 中同时启动 Vue.js 前端项目和 Spring Boot 后端项目需要采取多模块方式,以确保两个项目可以协同工作。首先,创建一个 Maven 父项目,该父项目将包含两个子模块,一个用于 Vue.js 前端,另一个用于 Spring Boot 后端。在父项目下创建一个子模块,该子模块用于托管 Vue.js 项目。同样,在父项目下创建另一个子模块,用于托管 Spri
在 IntelliJ IDEA 中同时启动 Vue.js 前端项目和 Spring Boot 后端项目需要采取多模块方式,以确保两个项目可以协同工作。以下是一种常见的方式:
- 
  创建一个父项目: 首先,创建一个 Maven 父项目,该父项目将包含两个子模块,一个用于 Vue.js 前端,另一个用于 Spring Boot 后端。 
- 
  创建前端 Vue.js 项目子模块: 在父项目下创建一个子模块,该子模块用于托管 Vue.js 项目。可以使用 Vue CLI 创建一个新的 Vue.js 项目。 bash vue create frontend进入创建的 Vue.js 项目目录: bash cd frontend
- 
  创建后端 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
- 
  调整项目结构: 在 IntelliJ IDEA 中打开父项目。 将前端和后端两个子模块拖拽到父项目中,形成父子关系。 
- 
  配置前端项目的启动: 打开前端 Vue.js 项目,找到 package.json文件,添加一个start脚本:json "scripts": { "serve": "vue-cli-service serve", "start": "vue-cli-service serve --mode development" }
- 
  配置后端项目的启动: 打开后端 Spring Boot 项目,找到 Application.java文件,右键点击选择 "Run"。
- 
  启动项目: 在 IntelliJ IDEA 中,可以选择 Run > Run 'backend' 和 Run > npm serve 来分别启动后端和前端项目。 或者可以通过 Maven 插件在父项目根目录执行如下命令,一次启动两个子模块: bash mvn spring-boot:run此时,前端项目可以通过 http://localhost:8080访问,后端 API 可以通过http://localhost:8080/api访问。
确保前端项目的 API 调用路径正确配置,以能够访问到后端 API。这样,前后端就可以同时启动并进行协同工作。
更多推荐
 
 



所有评论(0)