5分钟搞定 Springboot + Vue前后端分离项目部署

部署一个Spring Boot + Vue项目需要以下几个步骤：

1. 安装Node.js和npm（Node.js包管理器）

2. 安装Vue CLI

3. 创建Vue项目

4. 将Vue项目打包成静态资源

5. 配置Spring Boot项目

6. 部署到服务器

下面是详细的操作步骤：

1. 安装Node.js和npm

访问Node.js官网（https://nodejs.org/）下载并安装适合你操作系统的Node.js版本。安装完成后，打开命令行工具，输入node -v和npm -v，检查是否安装成功。

2. 安装Vue CLI

在命令行工具中输入以下命令安装Vue CLI：

npm install -g @vue/cli

3. 创建Vue项目

在命令行工具中输入以下命令创建一个名为my-vue-app的Vue项目：

vue create my-vue-app

4. 按照提示选择默认配置或者自定义配置。

将Vue项目打包成静态资源
进入Vue项目目录：

cd my-vue-app

运行以下命令将Vue项目打包成静态资源：

npm run build

5. 打包完成后，会在dist目录下生成静态资源文件。

配置Spring Boot项目
在Spring Boot项目的src/main/resources目录下创建一个名为static的文件夹，并将第4步生成的静态资源文件复制到该文件夹中。

接下来，需要在Spring Boot项目中引入Vue静态资源的处理。在src/main/java目录下的Application.java文件中添加以下代码：

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class Application extends SpringBootServletInitializer implements WebMvcConfigurer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        Resource resource = new ClassPathResource("static/");
        registry.addResourceHandler("/static/**").addResourceLocations(resource.getURL());
    }
}

6. 部署到服务器

将Spring Boot项目打包成jar文件，例如：

mvn clean package

将生成的target目录下的my-vue-app-0.0.1-SNAPSHOT.jar文件上传到服务器。

在服务器上运行以下命令启动Spring Boot项目：

java -jar my-vue-app-0.0.1-SNAPSHOT.jar

现在，你的Spring Boot + Vue项目已经部署成功，可以通过浏览器访问http://服务器IP地址：端口号来查看项目。