一、先拉工程，地址：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

二、在window上用idea打开跑通，可参考工程里的操作手册

后端启动：需要安装jdk，maven，mysql，redis环境

 前端启动：需要安装node,vue-cli环境

命令窗口执行：

npm install -g yarn # 全局安装yarn
yarn install # 安装项目依赖
yarn run dev # 启动前端项目
yarn build:prod # 后续打包上传到linux需要执行

效果：

三、linux安装环境(windows上可安装winscp,便于上传文件到linux)

winscp：winscp安装及关联putty使用_putty.exe没有找到-CSDN博客

jdk：linux系统安装jdk-CSDN博客 

mysql：Linux7安装mysql数据库以及navicat远程连接mysql-CSDN博客 

redis：linux7安装redis7.2.3以及使用ssh方式远程连接redis教程-CSDN博客 

nginx：阿里云服务linux系统CentOs8.5安装/卸载nginx1.15.9_centos8删除nginx-CSDN博客

tomcat： Linux7安装tomcat9.0.83教程-CSDN博客

四、后端部署

1、 后端打包：点开右侧maven,先点clean,执行完后点package,执行完后左侧target出现的war包就是我们需要上传到linux的包，若找不到打开文件管理看看，可能是idea隐藏了此类文件。

2、将包上传到tomcat的webapps目录下

 

3、重启tomcat

cd /usr/local/tomcat/bin
./shutdown.sh
./startup.sh

五、前端部署 

1、前端打包，打开命令行执行yarn build:prod，最后生成dist文件

 2、将dist里文件上传到linux,存放位置可自定义

3、修改nginx

    server {
        listen       80;
        server_name  www.xxx.com; # 域名，没有域名写主机ip也可以

        location / {
            root   /home/app/minigame/ui; # 存放前端文件的地址
            try_files $uri $uri/ /index.html;# 不加刷新会404
            index  index.html index.htm;
        }

        location ^~/prod-api/ { # 处理跨域，请求到后端tomcat
            proxy_pass http://127.0.0.1:8080/;
        }

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

 其中prod-api对应生产环境设置的前缀

4、重启nginx

cd /usr/local/nginx/sbin
./nginx -s reload

六、外网访问

域名访问：http://www.xxx.com

ip访问：http://8.xx.xx.98

注：

若页面显示但network请求到后端404，可查看tomcat日志排查问题。

若页面404，可查看nginx配置/日志排查问题。