SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

前言

给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5

有了一个基于 ElementUI 的电商后台管理系统，在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 node 完成的，对于我们 Java 开发者来说，用不到。我学习的是 ElementUI 的使用，就足够了，然后后端服务就全部可以自己使用 SpringBoot 来完成

最近貌似 Vue3 正式版也发布了，正好有空看可以去看一看

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue 打包的项目如何部署？

1.1 Vue 项目打包

温馨提示：如果你的电脑上没有装 vue 环境的话，请先安装好 node，下面使用 Express（一个 http 框架，提供了快速搭建服务器的功能） 也是基于 node 的。具体安装方法请自行百度，我这里就不介绍如何安装了

我的项目是使用 vue cli4 搭建的，使用脚手架搭建的项目，如果不知道自己的 vue cli 是什么版本的，可以输入如下命令进行查看

vue -V

使用脚手架搭建好处，就是什么都是可视化的，一键启动项目，一键编译项目，安装依赖也会变的非常非常的方便。效果图如下

我们 点击 build ，然后运行，等待项目构建完成之后，就可以在项目根路径生成一个dist 文件夹，这个文件就存放着我们 vue 项目打包好的所有内容

1.2 使用 Express 代理静态资源文件

当然代理静态资源还有很多种方法，这是一种我认为比较轻松的方案，那么要如何来做呢？

提示：无论是 Linux 环境还是 Windows 环境，以下方案是通用的（前提是你已经安装好了 node 以及 npm，我们要用npm 包安装环境）

• 创建一个新的文件夹比如 ：myapp mkdir myapp然后进入该文件夹 ：cd myapp
• 然后初始化 node 环境：npm init ，
• 然后它会让你自己选择配置一些 JSON 信息
• 然后安装 Express 环境：npm install express --save ，-- save 表示仅在当前环境使用。这里也会提示你创建一个 js 文件，你可以忽略，也可以创建
• 然后创建 app.js 文件：touch app.js ，和 dist 文件夹在同一个目录哦
• 编写 Express 代理静态资源的代码，windows 环境用文本编辑器，Linux 环境用 vim 编辑器

const express = require('express')
const app = express()

// 代理静态资源
app.use(express.static('./dist'))

// 监听 4000 端口作为资源的访问路径
app.listen(4000, () => {
 console.log('server running at http://127.0.0.1:4000')
})

编辑完毕，保存代码我们使用一个项目管理的工具包 pm2

windows 同理

安装这个我们可以实时查看项目的情况

使用这个，我们就不必用 node app.js 运行项目了，这样直接运行的弊端就是当你关闭 shell 或者 Linux shell 项目也会自动关闭。这样项目管理就会非常的方便哦

二、SpringBoot 项目如何部署？

2.1 数据库部署可能出现的问题

• 首先要确保我们的服务器上安装了 mysql 数据库
• 然后就是数据库的相关配置，设置远程访问等等
• 数据库默认是不支持远程连接的，如果需要请放开，设置 % 就代表运行外部用户访问

mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// 如果上面不起效果，请输入这条命令，应该就可以解决远程访问的问题了
mysql> grant all privileges>
<build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解