当前位置：首页 > VUE

vue实现java项目

2026-01-19 17:30:06VUE

Vue 与 Java 项目集成方案

Vue 作为前端框架，与 Java 后端项目集成通常采用前后端分离架构。以下是具体实现方式：

前端项目搭建

使用 Vue CLI 或 Vite 创建独立前端工程：

npm create vue@latest my-vue-app

或传统 Vue CLI：

npm install -g @vue/cli
vue create my-vue-app

配置 vue.config.js 开发环境代理，解决跨域问题：

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

后端接口开发

Java 后端需提供 RESTful API（Spring Boot 示例）：

@RestController
@RequestMapping("/api")
public class DemoController {

    @GetMapping("/data")
    public ResponseEntity<List<String>> getData() {
        return ResponseEntity.ok(Arrays.asList("Java", "Vue", "Spring"));
    }
}

前后端交互

前端通过 axios 调用接口：

vue实现java项目

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

部署方案

开发模式：

前端运行 npm run serve（默认端口 5173）
后端运行 Spring Boot（默认端口 8080）

生产部署：

前端打包：
```
npm run build
```
生成 dist 目录
后端集成方式：

方案A：将 dist 内容复制到 Spring Boot 的 src/main/resources/static
方案B：使用 Nginx 独立部署前端，通过反向代理连接后端

Spring Boot 静态资源配置示例（方案A）：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/")
                .addResourceLocations("classpath:/static/");
    }
}

安全配置

前后端分离需处理跨域问题，Spring Boot 可配置全局 CORS：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/")
                        .allowedOrigins("*")
                        .allowedMethods("GET", "POST");
            }
        };
    }
}

状态管理

复杂应用建议使用 Vuex/Pinia 管理全局状态：

// Pinia 示例
import { defineStore } from 'pinia'

export const useApiStore = defineStore('api', {
  state: () => ({
    data: []
  }),
  actions: {
    async fetchData() {
      const res = await axios.get('/api/data')
      this.data = res.data
    }
  }
})