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)