vue加springboot如何启动

Vue和Spring Boot的启动可以通过以下几个步骤实现：1、首先分别启动Vue前端和Spring Boot后端项目；2、确保两者的配置正确，能够互相通信；3、整合这两个项目使其可以同时运行。接下来，我们详细介绍每个步骤的具体操作和需要注意的事项。

一、启动Vue项目

安装Node.js和npm：确保系统中已经安装了Node.js和npm，可以通过命令行工具分别输入node -v和npm -v来检查版本。如果没有安装，可以前往Node.js官网下载安装包。
创建Vue项目：使用Vue CLI创建一个新项目，命令如下：
```
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
```
启动开发服务器：进入项目目录后，运行以下命令启动开发服务器：
```
npm run serve
```
默认情况下，Vue项目将在http://localhost:8080运行。

二、启动Spring Boot项目

安装Java和Maven：确保系统中已安装Java Development Kit (JDK) 和Maven，分别通过命令java -version和mvn -v检查版本。如果没有安装，可以前往Oracle或OpenJDK下载JDK，前往Apache Maven官网下载安装Maven。
创建Spring Boot项目：使用Spring Initializr创建一个新的Spring Boot项目，选择所需的依赖项（如Spring Web、Spring Data JPA等）。
编写代码：在项目中编写需要的Controller、Service、Repository等代码逻辑。
启动Spring Boot应用：进入项目目录，运行以下命令启动Spring Boot应用：
```
mvn spring-boot:run
```
默认情况下，Spring Boot项目将在http://localhost:8081运行。

三、配置Vue和Spring Boot通信

设置CORS（跨域资源共享）：在Spring Boot项目中配置CORS，以便前端可以访问后端API。在Spring Boot的Controller类中添加如下代码：
```
@CrossOrigin(origins = "http://localhost:8080")
@RestController
public class MyController {
    // Your API endpoints
}
```
修改Vue项目的API请求地址：在Vue项目中，将API请求的地址修改为Spring Boot项目的地址。例如，使用axios进行API请求时：
```
axios.get('http://localhost:8081/api/endpoint')
     .then(response => {
         console.log(response.data);
     });
```

四、整合Vue和Spring Boot项目

构建Vue项目：在Vue项目目录中运行以下命令，将代码打包到dist目录中：
```
npm run build
```
将打包后的文件复制到Spring Boot项目中：将dist目录中的所有文件复制到Spring Boot项目的src/main/resources/static目录下。
修改Spring Boot的配置：确保Spring Boot项目的application.properties文件中配置了正确的静态资源路径，例如：
```
spring.resources.static-locations=classpath:/static/
```
重新启动Spring Boot应用：在Spring Boot项目目录中运行以下命令重新启动应用：
```
mvn spring-boot:run
```
这样，Spring Boot项目将会提供前端静态资源和后端API服务。

五、示例项目结构和代码

为了更好地理解，我们可以看一个具体的示例项目结构和代码：

Vue项目结构

my-vue-app/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── views/ │ ├── App.vue │ └── main.js ├── .gitignore ├── babel.config.js ├── package.json └── vue.config.js

Spring Boot项目结构

my-springboot-app/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── example/ │ │ │ └── demo/ │ │ │ ├── DemoApplication.java │ │ │ └── controller/ │ │ │ └── MyController.java │ │ ├── resources/ │ │ │ ├── static/ │ │ │ ├── application.properties │ │ │ └── templates/ │ └── test/ ├── .gitignore ├── pom.xml └── README.md

Vue项目main.js示例

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
axios.defaults.baseURL = 'http://localhost:8081'

Spring Boot项目Controller示例

package com.example.demo.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@CrossOrigin(origins = "http://localhost:8080")
@RestController
public class MyController {
    @GetMapping("/api/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }
}

总结

整合Vue和Spring Boot项目的关键在于：1、分别启动Vue和Spring Boot项目；2、正确配置CORS和API请求地址；3、将打包后的Vue静态资源整合到Spring Boot项目中。通过以上步骤，您可以顺利实现Vue前端和Spring Boot后端的整合，从而提供完整的全栈解决方案。建议在开发过程中，注意各项配置的正确性，及时调试和解决出现的问题，以确保项目顺利进行和部署。