将前端 Vue 和后端 Java 打包成一个 EXE 文件
在开发过程中，很多开发者希望能够将他们的应用程序打包成一个自包含的可执行文件（EXE），以便于分发和部署。在本篇文章中，我们将学习如何将前端 Vue 应用和后端 Java 应用打包成一个 EXE 文件。我们会通过一个明确的步骤流程来指导你实现这一目标。
整个流程概览
我们的工作流程可以总结为以下几个步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 搭建前端 Vue 项目 |
| 2 | 搭建后端 Java 项目 |
| 3 | 将前端和后端整合在一起 |
| 4 | 使用打包工具进行打包（如 pkg 或 launch4j） |
| 5 | 生成最终的 EXE 文件 |
1. 搭建前端 Vue 项目
首先，确保你已经安装了 Node.js 和 Vue CLI。接着，使用以下命令创建一个 Vue 项目：
# 首先安装 Vue CLI
npm install -g @vue/cli
# 创建一个新的 Vue 项目
vue create my-project
在这个过程中，会提示你选择项目的预设，选择默认即可。
2. 搭建后端 Java 项目
接着，我们需要创建一个简单的 Java Spring Boot 应用，使用以下步骤：
# 使用 Spring Initializr 创建一个新的 Spring Boot 项目
curl -d dependencies=web -d name=my-backend -d packageName=com.example.mybackend -d artifactId=my-backend -o my-backend.zip
# 解压项目
unzip my-backend.zip -d my-backend
解压后，我们的项目结构应该包含一个 src/main/java 和 src/main/resources 文件夹。
然后，我们创建一个简单的 REST 控制器。
在 src/main/java/com/example/mybackend 目录下，创建一个 HelloController.java 文件，并添加以下代码：
package com.example.mybackend;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/api/hello")
public String sayHello() {
return "Hello from Java Backend!";
}
}
这段代码创建了一个简单的 REST 接口，在访问 /api/hello 时返回一条消息。
3. 将前端和后端整合在一起
在前端 Vue 项目的 src 目录下，访问后端 REST API。
我们可以在 src/App.vue 的 mounted 生命周期钩子中添加以下代码：
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: ""
};
},
mounted() {
// 请求后端 API
fetch("http://localhost:8080/api/hello")
.then(response => response.text())
.then(data => {
this.message = data; // 获取API返回的数据
});
}
};
</script>
4. 使用打包工具进行打包
为了将我们的应用打包成一个 EXE 文件，有几种工具可供选择。这里我们选择 pkg 和 launch4j。
4.1 使用 pkg 打包前端
首先，你需要安装 pkg：
npm install -g pkg
接下来，生成前端的可执行文件。首先在 package.json 中添加以下内容：
"bin": "dist/my-project.js",
然后使用以下命令进行打包：
npm run build # 先构建前端
pkg package.json
4.2 使用 launch4j 打包后端
使用 launch4j，你可以将 Java 项目打包为 Windows EXE 文件。首先，你需要下载并配置这个工具，然后使用以下步骤：
- 在
launch4j中创建一个新的项目。 - 设置主类
com.example.mybackend.Application。 - 选择生成的 JAR 文件。
- 配置其他选项后，点击 "Build wrapper"。
5. 生成最终的 EXE 文件
当你完成上述步骤后，你将拥有两个 EXE 文件：一个用于前端 Vue 应用，另一个用于后端 Java 应用。
然后，你可以进一步将它们打包在一起，可以选择使用 ZIP 或其他压缩格式，便于分发给其他用户。
sequenceDiagram
participant Vue as 前端 Vue 应用
participant Java as 后端 Java 应用
participant User as 用户
User->>Vue: 访问 Vue 应用
Vue->>Java: 请求 /api/hello
Java-->>Vue: 返回 "Hello from Java Backend!"
Vue-->>User: 显示 "Hello from Java Backend!"
结尾
通过以上步骤，我们成功地将前端 Vue 应用和后端 Java 应用打包成了 EXE 文件。这样的整合方式不仅提高了开发效率，还方便了后续的应用部署和使用。希望这篇文章能对你有所帮助，祝你在后续的开发中取得更大的成功！
