Springboot+Vue网页部署上线全教程

1.环境说明

组件/技术	版本号	说明
操作系统	CentOS 7.6 64bit	Linux 服务器操作系统
JDK	1.8	Java 8 运行环境
Spring Boot	2.5.9	后端框架，构建 REST 接口
Vue.js	2.6.14	前端框架，构建用户界面
MySQL	8.0	关系型数据库管理系统
Nginx	1.24.0	Web 服务器，前后端反向代理
服务器	腾讯云	安装操作系统

需要帮助部署，可以私信本人 需要帮助部署，可以私信本人
需要帮助部署，可以私信本人 需要帮助部署，可以私信本人

2.Mysql安装部署

2.1 安装并修改密码

1. 进入安装目录并创建 MySQL 文件夹

cd /usr/local
mkdir -p mysql
cd mysql

2. 下载 MySQL 安装源

wget https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm

或从官网下载安装包后上传服务器：https://dev.mysql.com/downloads/

3. 添加 YUM 源依赖

yum -y localinstall mysql80-community-release-el7-3.noarch.rpm

4. 安装 RPM 包（如未自动完成）

rpm -ivh mysql80-community-release-el7-3.noarch.rpm

5. 安装 MySQL Server

yum install mysql-server

如果遇到 GPG 验证错误：

yum install mysql-community-server --nogpgcheck

6. 启动并设置开机启动

systemctl start mysqld
systemctl enable mysqld
systemctl daemon-reexec

7. 验证服务状态

service mysqld status
netstat -anp | grep 3306

8. 查看 root 临时密码

grep "A temporary password" /var/log/mysqld.log

9. 使用初始密码登录 MySQL

mysql -u root -p

10. 修改 root 密码（强密码）

ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyDifficultPass4@';

11. 修改为简单密码（开发测试用）

SHOW VARIABLES LIKE 'validate_password%';-- 修改策略
SET GLOBAL validate_password.length = 6;
SET GLOBAL validate_password.policy = 0;
SET GLOBAL validate_password.check_user_name = OFF;-- 设置简单密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

12. 开启远程连接权限

ALTER USER 'root'@'%' IDENTIFIED BY '123456';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

2.2 防火墙开放

-- 启动防火墙（如果关闭）
systemctl start firewalld-- 开放端口
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload-- 重启防火墙
systemctl restart firewalld

云服务器（如阿里云）还需在控制台开放安全组端口 3306。

3.Spring Boot项目打包

3.1 配置公网ip

在 application.properties 或 application.yml 文件中，修改数据库连接配置，使用云服务器的公网 IP 地址：

spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: root   #你本地的数据库用户名password: studyManager1! #你本地的数据库密码url: jdbc:mysql://<云服务器公网IP>:3306/study_manager?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true

确保 MySQL 服务器允许远程连接，并在防火墙中开放 3306 端口。

---

3.2 安装 Maven

1. 下载 Apache Maven

• 访问 Maven 官方下载页面：
  Apache Maven，选择适合 Windows 的二进制压缩包（.zip 格式）。

2. 解压 Maven 压缩包

• 将下载的 apache-maven-3.x.x-bin.zip 文件解压到你希望安装 Maven 的目录，例如：
  C:\Program Files\Apache\apache-maven-3.x.x。Reddit+3phoenixNAP | Global IT Services+3GeeksforGeeks+3

3. 设置环境变量

• 配置 MAVEN_HOME 环境变量：
  • 右键点击“此电脑”或“计算机”，选择“属性”。
  • 点击“高级系统设置”，然后点击“环境变量”。
  • 在“系统变量”部分，点击“新建”，输入：
    • 变量名：MAVEN_HOME
    • 变量值：C:\Program Files\Apache\apache-maven-3.x.x
  • 点击“确定”。
• 将 Maven 的 bin 目录添加到 Path 环境变量：
  • 在“系统变量”部分，找到并选择 Path，点击“编辑”。
  • 点击“新建”，输入：
    • %MAVEN_HOME%\bin
  • 点击“确定”。Stack Overflow

4. 配置 JAVA_HOME 环境变量

• 确保已安装 Java JDK，并设置 JAVA_HOME 环境变量：
  • 在“系统变量”部分，点击“新建”，输入：
    • 变量名：JAVA_HOME
    • 变量值：C:\Program Files\Java\jdk1.8.0_xx（根据实际安装路径调整）
  • 点击“确定”。

5. 验证 Maven 安装

• 打开命令提示符（CMD），输入以下命令：

 mvn -version

• 如果安装成功，将显示 Maven 的版本信息。

---

3.3 使用 Maven 打包 Spring Boot 项目

在项目根目录下执行：

mvn clean package

生成的 JAR 文件位于 target/ 目录下。

3.4 Centos运行Jar包

3.4.1 安装 Java 1.8 环境

1.执行以下命令安装 Java 1.8：

sudo yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-devel

2.安装完成后验证版本：

java -version

3.确保输出包含：

openjdk version "1.8.0_xxx"

3.4.2 上传 Spring Boot .jar 包到服务器

1.使用 scp 上传 jar 包：

scp yourapp.jar root@your_server_ip:/home/youruser/yourapp/

2.或使用 XFTP、宝塔等工具上传到指定目录（如 /home/youruser/yourapp/）。

3.4.3 后台运行 .jar 包

1.进入 jar 包所在目录：

cd /home/youruser/yourapp

2.使用 nohup 后台运行并输出日志到 app.log：

nohup java -jar yourapp.jar > app.log 2>&1 &

3.4.4 查看运行情况

1.查看 Java 进程是否在运行：

ps -ef | grep java

2.实时查看日志内容：

tail -f app.log

3.4.5 设置开机启动（可选）

1.创建 systemd 服务文件：

sudo vi /etc/systemd/system/yourapp.service

2.填写以下内容（根据实际路径修改）：

[Unit]
Description=Spring Boot App
After=network.target[Service]
User=root
ExecStart=/usr/bin/java -jar /home/youruser/yourapp/yourapp.jar
SuccessExitStatus=143
Restart=always
RestartSec=10[Install]
WantedBy=multi-user.target

3.保存后重新加载 systemd 并启用服务：

sudo systemctl daemon-reload
sudo systemctl enable yourapp.service
sudo systemctl start yourapp.service

4.Vue项目打包

4.1安装 Node.js

1. 下载

• 访问 Node.js官网，选择与系统匹配的版本下载（如 Windows 64 位）。

2. 安装

• 双击安装包，按照提示依次点击 Next，接受协议，选择安装目录（如：E:\devTools\nodejs），完成安装。

3. 添加环境变量

• 打开「系统属性 → 环境变量 → 系统变量 → Path」，添加 Node.js 安装路径（如：E:\devTools\nodejs\）。

---

4.1.1 验证安装是否成功

在命令行中输入以下命令：

node -v
npm -v

能正确输出版本号即表示安装成功。

---

4.1.2修改全局模块存储路径

1. 查看默认路径

npm get prefix
npm get cache

2. 创建新目录

在 Node.js 安装目录下新建：

• node_global（用于存放全局模块）
• node_cache（用于存放缓存）

3. 修改路径配置

npm config set prefix "E:\devTools\nodejs\node_global"
npm config set cache "E:\devTools\nodejs\node_cache"

并将 E:\devTools\nodejs\node_global 添加到环境变量 Path 中。

4. 测试

npm install express -g

检查是否安装成功，并验证模块是否出现在 node_global\node_modules 中。

若安装失败，多为权限问题，请确保 nodejs 及其子目录权限已全部勾选“完全控制”。

---

4.2配置国内镜像源

1. 更改 npm 镜像源为淘宝镜像

npm config set registry https://registry.npmmirror.com
npm config get registry

2. 安装 cnpm（可选）

npm install -g cnpm --registry=https://registry.npmmirror.com

验证是否安装成功：

cnpm -v

若命令无效，确认是否添加 node_global 到环境变量并重启命令行。

4.3 修改 API 路径为部署的 Spring Boot 公网地址

1. 找到 Axios 请求封装文件（如 src/utils/request.js）
打开 Vue 项目目录，找到你封装请求的文件，一般是 request.js，内容可能如下：

import axios from 'axios'const request = axios.create({baseURL: process.env.VUE_APP_BASEURL, // 请求地址timeout: 30000
})export default request

2. 在项目根目录创建或编辑 .env.production 文件
添加以下内容，将 http://你的公网IP:端口号 替换成你部署的 Spring Boot 地址：

VUE_APP_BASEURL=http://123.123.123.123:8080

这个变量会在打包生产环境时替换 process.env.VUE_APP_BASEURL。

3. 确保 request.js 中引用的是环境变量而不是写死的地址
你已经使用了 process.env.VUE_APP_BASEURL，只要打包时选择生产环境就会读取 .env.production 文件中的值。

4. 可选：在控制台打印确认变量是否生效
你可以在 request.js 中加一句：

console.log("当前后端API地址：", process.env.VUE_APP_BASEURL)

打包后打开浏览器控制台确认地址是否正确。

当然上面这个步骤不是一定这样，可以根据不同项目寻找即可

4.4 打包并运行 Vue 项目

1. 确保 package.json 中包含 build 命令
打开 package.json 文件，确认有如下内容：

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"
}

2. 使用 build 命令进行打包
在终端中进入项目目录，执行以下命令：

npm run build

Vue 会读取 .env.production，并将打包好的静态资源输出到 dist/ 文件夹。

2. 一般打包后的目录

dist/
├── index.html
├── favicon.ico（如果有设置）
├── css/
│   └── xxx.[hash].css
├── js/
│   ├── chunk-vendors.[hash].js
│   ├── app.[hash].js
│   └── xxx.[hash].js
├── img/
│   └── 图片资源（如果有）
└── static/（某些配置下可能会有）├── css/├── js/└── img/

5.Nginx部署Vue

5.1 Nginx安装

1.下载

Nginx官网下载地址

2.将.tar.gz文件放到/opt目录下（其他目录也行），解压文件

tar -zxvf nginx-1.24.0.tar.gz

3.cd进入解压目录，执行安装命令(安装到了 usr/local/nginx)

./configure --prefix=/usr/local/nginx

4.再执行

make
make insatll

5.查看/usr/local 是否有nginx目录

6.防火墙开放端口（如果是云服务器，还需要手动添加端口）

firewall-cmd --zone=public --add-port=80/tcp --permanent # 开放80端口
firewall-cmd --reload # 重启

7.为了方便全局操作nginx，添加服务脚本

vi /usr/lib/systemd/system/nginx.service 

[Unit]
Description=nginx - web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
ExecQuit=/usr/local/nginx/sbin/nginx -s quit
PrivateTmp=true
[Install]
WantedBy=multi-user.target

systemctl daemon-reload # 重新加载服务
systemctl start nginx.service # 重启服务

8.重启nginx服务

systemctl reload nginx 
systemctl enable nginx.service # 开机启动

5.2 修改Nginx配置

在usr/local目录下：

页面默认目录是html，配置文件在conf中的nginx.conf

原本一台服务器只能对应一个站点，通过虚拟主机技术可以虚拟化成多个站点同时对外提供服务。

虚拟主机域名配置

1. 在nginx目录下创建两台主机文件夹并且分别在里面编写内容不同index.html，用来测试访问

2. 修改nginx配置文件

    server {listen 80;server_name 110.110.110.100;location / {root /usr/local/nginx/html/front;index index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}server {listen 8081;server_name 110.110.110.100;root /usr/local/nginx/html/backend;index index.html;location / {try_files $uri $uri/ /index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}

第一个 server 块（监听 80 端口）

server {listen 80;server_name http://110.110.110.100;

作用：
监听 80 端口（HTTP 默认端口），域名或 IP 为 http://110.110.110.100。

location / {root /usr/local/nginx/html/front;index index.html;}

作用：
当用户访问根路径 /（如 http://110.110.110.100）时，从 /usr/local/nginx/html/front/ 目录中查找 index.html 作为首页进行展示。也就是说，这是你 Vue 前端打包后放置的位置。

error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}
}

作用：
当出现 500/502/503/504 错误时，返回 50x.html 页面，文件存放在 /usr/local/nginx/html/ 目录下。

---

第二个 server 块（监听 8081 端口）

server {listen 8081;server_name 110.110.110.100;

作用：
监听 8081 端口（自定义端口），通常用于部署后台管理界面、二级项目、前端测试项目等。

root /usr/local/nginx/html/backend;index index.html;

作用：
默认的根路径指向 /usr/local/nginx/html/backend/，用于加载后台前端资源。

location / {try_files $uri $uri/ /index.html;}

5.3 将打包文件放到对应位置

由5.2配置可知，我用了两个页面，一个后台管理系统，一个前台页面，只需要将打包的文件放到对应的目录下即可

前台打包代码

后台打包代码

将5.2和5.3都完成之后，就可以重启Nginx服务了

# 有时不成功
systemctl reload nginx 
# 保险起见，停止让后在启动
systemctl stop nginx 
systemctl start nginx 

自此就完成了整个项目的部署，可以输出一下网址来访问网页了

http://110.110.110.100:8081 # 后台
http://110.110.110.100/ # 前台

6.总结

1. 环境说明
首先确定服务器操作系统为 CentOS，确保具备基本的网络连接和 root 或 sudo 权限，为后续安装与配置打下基础。

2. MySQL 安装部署
通过 Yum 安装 MySQL，并完成初始化设置，包括修改 root 密码和开放防火墙端口，使数据库可以远程访问并为 Spring Boot 提供持久化支持。

3. Spring Boot 项目打包与部署
配置后端项目使用公网 IP，使其接口可被前端访问。然后安装 Maven 工具，通过 mvn package 命令打包生成 .jar 文件。在服务器上安装 Java 1.8，并通过 nohup java -jar 命令在后台运行后端服务，附带日志输出。为提升可靠性，还提供 systemd 服务方式实现开机自启动。

4. Vue 项目打包
安装 Node.js 和 npm，并配置国内镜像源以加快依赖安装。将前端请求地址替换为实际部署的 Spring Boot 公网地址，再使用 npm run build 命令打包生成静态资源。

5. Nginx 部署 Vue 前端
在服务器中安装并配置 Nginx，分别配置 server 块监听 80 或其他端口，设置静态资源路径，并适配 Vue Router 的 history 模式。最后将 Vue 打包后的 dist 文件夹内容拷贝到 Nginx 指定目录，实现前端页面的访问上线。