vuespringboot打包app

Vue-SpringBoot App 打包教程：原理与详细介绍

在Web开发过程中，Vue.js 和 Spring Boot 是常用的技术栈。Vue.js 是一个用于构建用户界面的 JavaScript 框架， 能够帮助我们快速构建富有交互性的单页面应用（SPA）。Spring Boot 是一个基于 Java 的 Web 开发框架，它能够提供简单易行的实用程序、插件和依赖关系配置，帮助我们简化开发过程。

现在，让我们来学习如何将 Vue.js 与 Spring Boot 结合并打包成一个完整的 Web 应用程序。

## 1. 配置开发环境

首先，您需要以下基本软件和环境：

1. Java开发环境，强烈推荐使用最新稳定版的 JDK (JDK 8或以上)；

2. [Node.js](https://nodejs.org/), 建议您使用 LTS (长期支持) 版本；

3. 编码工具，推荐 [Visual Studio Code](https://code.visualstudio.com/) 或 [IntelliJ IDEA](https://www.jetbrains.com/idea/);

4. Vue CLI: 通过运行以下命令来全局安装 Vue CLI：

```

npm install -g @vue/cli

```

5. Maven，用来创建 Spring Boot 项目以及依赖管理等。

## 2. 创建 Vue.js 项目

使用 Vue CLI，通过以下命令来创建一个新的 Vue.js 项目：

```

vue create my-vue-app

```

接下来，进入项目目录，并安装依赖：

```

cd my-vue-app

npm install

```

确保 Vue.js 项目正常运行：

```

npm run serve

```

然后在浏览器访问：http://localhost:8080，您应该能看到 Vue.js 应用的默认页面。

## 3. 创建 Spring Boot 项目

使用 [Spring Initializr](https://start.spring.io/) 来创建一个简单的 Spring Boot 项目，选择必要的依赖项，例如：Web, JPA, MySQL等，然后点击“Generate”按钮下载并解压项目。

将 Spring Boot 项目导入您的开发工具，如 IntelliJ IDEA 或 Eclipse。确保您已经配置了正确的 JDK 版本。

## 4. 集成 Vue.js 与 Spring Boot

在 Vue.js 项目目录下,使用命令行工具执行以下命令,将 Vue.js 打包成静态资源：

```

npm run build

```

这将在 Vue.js 项目的 `dist` 目录下生成一个包含静态资源的文件夹。将 `dist` 目录下所有文件复制到 Spring Boot 项目的 "src/main/resources/static" 文件夹下;

接下来，在 Spring Boot 项目的 "src/main/resources/application.properties" 文件中，添加以下配置以确保 Spring Boot 项目优先加载已经打包的 Vue.js 静态资源：

```

spring.resources.static-locations=classpath:/static/

```

完成后编译运行 Spring Boot 项目。

## 5. 打包最终应用

首先，将整个 Spring Boot 项目（包括 Vue.js 的静态资源）打包成一个 JAR 文件；在项目根目录运行以下 Maven 命令进行打包:

```

mvn clean package

```

打包完成后，在 "target" 目录下会生成一个 JAR 文件。

## 6. 部署与运行

通过以下命令运行生成的 JAR 文件：

```

java -jar target/my-springboot-app-0.0.1-SNAPSHOT.jar

```

然后打开浏览器访问: http://localhost:8080，您会看到 Vue.js 应用程序与 Spring Boot 后端已经成功集成在一起。

至此，您已经成功将 Vue.js 项目和 Spring Boot 项目集成打包成一个 Web 应用程序。这只是让您入门的基本流程，您可以根据您的需求对项目作进一步的调整和探索。希望对您有所帮助！