宝塔+RuoYi-Vue 前端分离版-陌上烟雨遥

1、先装宝塔宝塔面板 – 简单好用的Linux/Windows服务器运维管理面板

2、安装Nginx、MySQL、Java项目一键部署、Redis

3、前端用Nginx管理，后端通过Java项目一键部署来管理

4、去若依官网下载RuoYi-Vue 前端分离版RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.viphttp://www.ruoyi.vip/

5、创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql，quartz.sql。数据脚本位置在根目录下的sql文件夹。数据库名可以改成自己的，要和配置文件一致。

6、修改数据库连接，编辑\ruoyi-admin\src\main\resources目录下的application-druid.yml

宝塔+RuoYi-Vue 前端分离版插图1

7、修改端口号和redis的设置，编辑\ruoyi-admin\src\main\resources目录下的application.yml

宝塔+RuoYi-Vue 前端分离版插图2

宝塔+RuoYi-Vue 前端分离版插图3

8、前端调用后端接口的端口修改，编辑\ruoyi-ui目录下的vue.config.js

宝塔+RuoYi-Vue 前端分离版插图4

9、前端安装依赖

# 进入项目目录 cd ruoyi-ui # 安装依赖 npm install # 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。 npm install --registry=https://registry.npmmirror.com # 本地开发 启动项目 npm run dev

10、后端打包

在根目录的bin目录下执行package.bat打包Web工程，生成war/jar包文件。
然后会在ruoyi-admin\target文件夹生成ruoyi-admin.jar

11、前端打包

# 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stage

会在ruoyi-ui目录下生成dist文件夹

12、把前后端的包和文件夹分别上传。

13、前端部署

前端使用Nginx发布，Nginx处理html的能力比Tomcat强。

worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; charset utf-8; location / { root /home/ruoyi/projects/ruoyi-ui; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

可以使用宝塔上的Nginx配置，配置好后别忘记重新加载Nginx配置。

宝塔+RuoYi-Vue 前端分离版插图5