正文

Spring Boot + Vue框架项目部署全攻略：从环境搭建到上线实战

/0 浏览量
0823

引言

随着互联网技术的不断发展，Spring Boot和Vue框架已经成为当前最流行的Java后端和前端技术。本文将带你从环境搭建到上线实战，全面解析Spring Boot + Vue框架项目的部署过程。无论你是初学者还是有经验的开发者，这篇文章都能为你提供实用的指导。

一、环境搭建

1.1 Java环境

首先，我们需要安装Java环境。由于Spring Boot是基于Java的，因此Java环境是必不可少的。以下是安装步骤：

  1. 下载Java安装包：前往Oracle官网下载适用于你操作系统的Java安装包。
  2. 安装Java：双击安装包，按照提示完成安装。
  3. 配置环境变量：在系统属性中，找到“系统变量”选项，添加JAVA_HOME变量，值为Java安装目录；在“Path”变量中，添加%JAVA_HOME%\bin。

1.2 Maven环境

Maven是Java项目的构建管理工具，用于管理项目依赖。以下是安装步骤：

  1. 下载Maven安装包：前往Apache Maven官网下载适用于你操作系统的Maven安装包。
  2. 安装Maven：解压安装包，将解压后的文件夹添加到系统环境变量中。
  3. 验证Maven安装：在命令行中输入mvn -version，如果显示版本信息，则表示Maven安装成功。

1.3 Node.js环境

Vue框架是基于Node.js的，因此我们需要安装Node.js环境。以下是安装步骤：

  1. 下载Node.js安装包：前往Node.js官网下载适用于你操作系统的安装包。
  2. 安装Node.js：双击安装包，按照提示完成安装。
  3. 验证Node.js安装：在命令行中输入node -v和npm -v，如果显示版本信息，则表示Node.js安装成功。

1.4 Vue CLI

Vue CLI是Vue官方提供的一个脚手架工具，用于快速搭建Vue项目。以下是安装步骤：

  1. 在命令行中输入以下命令安装Vue CLI：
npm install -g @vue/cli
  1. 验证Vue CLI安装：在命令行中输入vue --version，如果显示版本信息，则表示Vue CLI安装成功。

二、项目创建

2.1 后端项目

  1. 创建Spring Boot项目：在命令行中输入以下命令：
mvn archetype:generate -DarchetypeArtifactId=org.springframework.boot:spring-boot-starter-parent -DgroupId=com.example -DartifactId=myproject -Dversion=2.3.4.RELEASE
  1. 修改pom.xml文件，添加相关依赖：
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- 其他依赖 -->
</dependencies>
  1. 编写业务代码，完成项目开发。

2.2 前端项目

  1. 创建Vue项目：在命令行中输入以下命令：
vue create myproject
  1. 进入项目目录：
cd myproject
  1. 安装依赖：
npm install
  1. 编写业务代码，完成项目开发。

三、项目联调

3.1 配置跨域

由于前后端分离，我们需要配置跨域。以下是在Spring Boot项目中配置跨域的示例代码：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

3.2 编写接口

在Spring Boot项目中编写接口，供Vue项目调用。以下是一个简单的示例：

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

    @Autowired
    private UserService userService;

    @GetMapping("/user/{id}")
    public User getUserById(@PathVariable Long id) {
        return userService.getUserById(id);
    }
}

3.3 调试

在开发过程中，可以使用Postman等工具进行接口调试。

四、项目部署

4.1 打包

将Spring Boot项目和Vue项目分别打包成可执行文件。

  1. 打包Spring Boot项目：
mvn clean package
  1. 打包Vue项目：
npm run build

4.2 部署到服务器

将打包好的Spring Boot项目和Vue项目部署到服务器。

  1. 部署Spring Boot项目：

    • 将target目录下的jar文件上传到服务器。
    • 使用java -jar命令启动Spring Boot项目。

  2. 部署Vue项目：

    • 将dist目录下的文件上传到服务器。
    • 配置服务器，使访问dist目录下的index.html文件。

4.3 测试

在浏览器中访问Vue项目，测试前后端联调是否成功。

五、总结

本文从环境搭建到上线实战，全面解析了Spring Boot + Vue框架项目的部署过程。通过本文的指导，相信你已经掌握了Spring Boot + Vue框架项目的部署技巧。在实际开发过程中，还需要不断积累经验，才能更好地应对各种问题。祝你在编程道路上越走越远！

-- 展开阅读全文 --