实现一个 SpringBoot + Vue 项目需要以下步骤：
- 创建 Vue 前端项目：
# 安装 Vue CLI
npm install -g @vue/cli
# 创建新的 Vue 项目
vue create my-vue-app- 创建 SpringBoot 后端项目：
# 使用 Spring Initializr 快速生成项目
https://start.spring.io/
# 将生成的项目导入到 IDE 中，比如 IntelliJ IDEA 或者 Eclipse- 在 Vue 项目中集成并启动前端服务（开发模式）：
cd my-vue-app
npm run serve- 在 SpringBoot 项目中设置 CORS 跨域处理，并创建 API 接口：
// 在 SpringBoot 配置文件 application.properties 中添加 CORS 配置
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:8080");
}
}
@RestController
public class MyController {
@GetMapping("/api/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("Hello from SpringBoot");
}
}- 在 Vue 前端中发起 API 请求：
// 在 Vue 组件中
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
try {
const response = await this.axios.get('http://localhost:8080/api/data');
this.message = response.data;
} catch (error) {
console.error(error);
}
}
}
};
</script>- 配置 SpringBoot 项目使其与前端运行在同一主机和端口上，或者通过代理配置让 Vue 前端请求被代理到 SpringBoot 后端服务：
// 在 Vue 项目中 vue.config.js 文件
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
};- 构建并部署前后端应用：
# 构建 Vue 前端项目
cd my-vue-app
npm run build
# 构建 SpringBoot 后端项目
# 使用 Maven 或 Gradle 构建 JAR 或 WAR 包
# 部署到服务器，例如使用 Spring Boot Maven Plugin 或者 jar 命令以上步骤提供了一个简化的流程，实际项目中还需要考虑更多细节，如数据库连接、认证和授权、日志记录、单元测试、持续集成等。