springboot集成vue

### Spring Boot 整合 Vue.js 示例教程 #### 1. 创建 Spring Boot 应用程序 为了创建一个新的 Spring Boot 项目，可以使用 Spring Initializr 或者命令行工具。确保选择了 Web 和 Thymeleaf (用于静态资源管理) 的依赖项。 ```bash spring init --dependencies=web,thymeleaf my-spring-boot-app cd my-spring-boot-app ``` 这一步骤为后续整合 Vue.js 提供了必要的后端环境准备[^3]。 #### 2. 配置前端开发环境 安装 Node.js 及 npm 来设置 Vue CLI 工具链。接着，在项目的根目录下初始化一个新的 Vue 项目： ```bash npm install -g @vue/cli vue create frontend ``` 此时 `frontend` 文件夹内包含了完整的 Vue.js 单页面应用(SPA)，它将作为客户端部分运行于浏览器中[^2]。 #### 3. 修改 Maven 构建脚本 为了让 Maven 能够编译并打包前端代码到最终的 JAR 文件里，需调整 pom.xml 中的相关插件配置如下所示: ```xml <build> ... <plugins> <!-- 执行 vue-cli-service build --> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>front-end-maven-plugin</artifactId> <version>1.8.0</version> <executions> <execution> <id>install node and npm</id> <goals><goal>install-node-and-npm</goal></goals> </execution> <execution> <id>yarn install</id> <goals><goal>yarn-install</goal></goals> </execution> <execution> <id>yarn run build</id> <goals><goal>yarn-run</goal></goals> <configuration> <arguments>build</arguments> </configuration> </execution> </executions> </plugin> </plugins> ... </build> ``` 这段 XML 片段定义了一系列任务来自动化构建过程中的前端资产处理工作流。 #### 4. 设置跨域资源共享(CORS) 由于前后端分离部署的原因，默认情况下可能会遇到 CORS 错误。可以在 Spring Boot 控制器类上添加注解解决这个问题： ```java import org.springframework.web.bind.annotation.CrossOrigin; // ... @CrossOrigin(origins = "http://localhost:8080") // 替换成实际域名或 IP 地址 @RestController @RequestMapping("/api") public class MyController { } ``` 上述 Java 代码片段展示了如何通过简单的注解方式开启 API 接口对外部请求的支持[^1]。 #### 5. 运行与测试 完成以上步骤之后就可以分别启动两者的服务器来进行联调了。通常建议先执行 Maven clean package 命令以确保所有更改都被正确反映到了输出产物之中；随后再利用内置 Tomcat 容器或者其他任何兼容 Servlet 规范的服务容器加载 WAR/JAR 包即可访问由 Spring Boot 提供 RESTful APIs 并验证其能否被远端 Vue 实例正常调用了。