将Spring Boot + Vue项目导入IDEA并运行的全流程指南

本教程将详细讲解如何将一个 Spring Boot + Vue 前后端分离项目导入IntelliJ IDEA，并成功运行联调。适用于从GitHub、Gitee等平台下载的现有项目或自行创建的项目。

一、环境准备

确保已安装以下工具：

• JDK 1.8+（推荐JDK 11或17）
• Node.js 14+（含npm）
• IntelliJ IDEA Ultimate版（社区版需手动安装Vue插件）
• Maven 3.6+（IDEA一般内置）
• Vue CLI（可选，npm install -g @vue/cli）

二、导入Spring Boot后端项目

1. 打开IDEA并导入项目

1. File → Open → 选择后端项目的根目录（包含pom.xml的文件夹）。
2. IDEA会自动识别为Maven项目，点击Trust Project。

2. 配置Maven和JDK

1. 检查Maven配置：
   File → Settings → Build → Maven
   确认Maven路径、settings.xml和本地仓库位置正确。
2. 设置JDK：
   File → Project Structure → Project Settings → Project
   选择与项目兼容的JDK版本（如JDK 11）。

3. 解决依赖并配置启动项

1. 自动下载依赖：
   打开pom.xml，IDEA会自动下载依赖（右下角提示Import Changes）。
2. 配置Spring Boot启动类：
   • 找到XXXApplication.java（含@SpringBootApplication的主类）。
   • 右键 → Run ‘XXXApplication’，控制台输出Started Application表示成功。

三、导入Vue前端项目

1. 在IDEA中打开前端项目

1. File → Open → 选择前端项目根目录（包含package.json的文件夹）。
2. 若提示“Non-Project Files”，选择Trust Project。

2. 安装Node依赖

1. 打开Terminal（Alt+F12）：
   执行以下命令：
   bash

   复制

   npm install

   等待依赖安装完成（生成node_modules文件夹）。

3. 配置运行脚本

1. 编辑package.json：
   检查scripts部分是否有serve命令（Vue CLI项目默认包含）：
   json

   复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   }

2. 启动前端开发服务器：
   Terminal中运行：
   bash

   复制

   npm run serve

   输出App running at http://localhost:8080/表示成功。

四、前后端联调配置

1. 解决跨域问题（开发环境）

方案一：Vue代理配置

1. 在项目根目录创建vue.config.js：
   javascript

   复制

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:8080', // 后端地址
           changeOrigin: true,
           pathRewrite: { '^/api': '' }
         }
       }
     }
   };

2. 重启前端服务：npm run serve

方案二：Spring Boot跨域配置

在Spring Boot中添加全局配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

2. 修改API请求地址

在前端代码中，将请求URL改为代理路径（如/api/user/list）或直接指向后端地址。

五、运行测试

1. 启动Spring Boot：运行主类的main方法。
2. 启动Vue项目：在Terminal执行npm run serve。
3. 访问页面：浏览器打开http://localhost:8081（前端默认端口），验证数据交互。

六、常见问题解决

1. 依赖安装失败：
   • Maven：检查镜像源（推荐阿里云镜像）。
   • npm：尝试npm cache clean --force后重装。
2. 端口冲突：
   • 修改后端端口：application.properties中加server.port=9090
   • 修改前端端口：vue.config.js中配置devServer.port
3. 页面404或白屏：
   • 检查前端router配置是否为history模式，需后端配合处理路由。
   • 运行npm run build后，将dist文件夹内容复制到后端static目录。

通过以上步骤，您应该能顺利在IDEA中运行Spring Boot + Vue项目。若仍遇问题，可检查控制台日志或查阅项目文档中的特殊配置要求。

NatureYu普通

打赏 收藏 海报 链接