idea怎么启动springboot 的vue项目
时间: 2025-06-20 09:07:44 浏览: 18
### 如何在 IntelliJ IDEA 中启动集成 Spring Boot 和 Vue.js 的前后端项目
#### 启动 Spring Boot 部分
为了启动 Spring Boot 服务,在 IntelliJ IDEA 中可以按照以下方式操作:
1. 打开已创建好的 Spring Boot 项目,确保项目的 `pom.xml` 或 `build.gradle` 文件中包含了必要的依赖项,例如 Spring Web、Spring Data JPA 等[^1]。
2. 定位到主类文件(通常命名为 `Application.java`),该类带有 `@SpringBootApplication` 注解。
3. 右键点击主类中的 `main()` 方法,选择 **Run 'Application.main()'** 来启动 Spring Boot 应用程序。如果一切配置正常,控制台会显示应用程序成功运行的日志信息,并提示 RESTful API 已经部署在指定的端口上,默认通常是 `8080`[^2]。
#### 创建和启动 Vue 前端部分
对于 Vue.js 前端部分的操作如下:
1. 使用命令行工具进入 Vue 项目的根目录,执行以下命令安装所需的 npm 包:
```bash
npm install
```
2. 完成依赖包安装后,可以通过以下命令启动本地开发服务器:
```bash
npm run serve
```
默认情况下,Vue 开发服务器会在 `http://localhost:8081/` 上运行[^1]。
#### 实现前后端通信
为了让 Spring Boot 和 Vue 正常协作,需设置跨域资源共享 (CORS),以便前端能够调用后端接口。
1. 在 Spring Boot 项目中启用 CORS 支持,可以在控制器类或全局配置中添加支持。例如通过实现 `WebMvcConfigurer` 接口来允许特定域名访问资源:
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允许所有路径被访问
.allowedOrigins("http://localhost:8081") // 设置允许的前端地址
.allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的方法类型
}
}
```
2. 当 Vue 发起 HTTP 请求时,应指向 Spring Boot 提供的服务 URL 地址。例如使用 Axios 进行 GET 请求:
```javascript
axios.get('http://localhost:8080/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
```
以上步骤完成后即可顺利启动基于 IntelliJ IDEA 的 Spring Boot 和 Vue.js 结合的前后端分离项目。
阅读全文
相关推荐

















