Ubuntu 部署 SpringBoot+Vue+Vue-router 项目

0 基本情况

SpringBoot后端：

• 采用 Jar 打包
• 开放端口为8080

Vue：

• 使用Vue-Router配置路由，包含 /，/zao，/liu 三个路由
• Vue项目中会使用 axios 发送异步请求调用后端的 /api/zao/，/api/liu/ 路径的 API 来获取数据

由于Vue是单页应用的框架，前端在打包后仅包含如下文件：

├── assets
│   ├── axios-d23b7e71.js
│   ├── fa-brands-400-5d919029.woff2
│   ├── fa-regular-400-6a8c8e9e.woff2
│   ├── index-5485a2f2.css
│   ├── index-bfff1805.js
│   ├── loader-83b2ceb0.gif
│   ├── pxiByp8kv8JHgFVrLBT5Z11lFc-K-3276702c.woff2
│   ├── ...
│   └── Zao-710dee3b.js
├── favicon.ico
└── index.html

1 配置环境

1.1 前端

面板安装

为了方便操作，首先在服务器装一个面板，这里采用 1Panel - 现代化、开源的 Linux 服务器运维管理面板。

运行以下命令安装面板（安装过程如果出现问题请查看官方文档）：

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

安装完成后记录默认的访问url，并在服务器后台管理中开放对应的端口。

安装并配置 Openresty + 上传前端

上一步安装好面板后，进入面板中的应用商店模块即可一键安装 Openresty。

安装完毕后切换到网站标签页创建网站，选择静态网站，主域名要填客户机访问服务器时用到的域名，若你的服务器还未解析域名就填外网IP+端口。代号可以随意改成需要的名字，默认的也行。

这时就可以传输前端Vue项目到服务器上，进入到刚刚创建的网站的详情页，选择网站目录可以快速跳转：

随后会到面板的文件管理功能中，进入index目录并把Vue项目上传即可。（这一步有可能会因为权限问题等导致失败，可以自己使用其他文件传输客户端进行操作，比如Termius, Xshell等）

进行到这一步后，已经可以通过浏览器访问服务器的域名来查看自己的Vue项目首页，但可以发现查看其他页面会报404。这是因为Vue作为单页应用

单页web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

Java部署jar包并后台运行 - 李宗光 - 博客园