# 环境部署
# 准备工作
如果使用RuoYi-App项目,在此基础上希望得到最大化的效率工具支持,那么HBuilderX是你的首选。
1、首先访问HBuilderX的官网网址:(https://www.dcloud.io/hbuilderx.html (opens new window))
2、打开上面的HBuilderX下载网址后点击页面上download,在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。
3、在Windows10环境下下载后的文件是一个压缩的.zip文件,解压后双击运行HBuilderX.exe即可启动编辑器。
# 运行系统
前置条件,需要先启动RuoYi-Vue后端。
如何启动RuoYi-Vue后端可以参考 (RuoYi-Vue后端启动流程 (opens new window))
前往Gitee下载页面(https://gitee.com/y_project/RuoYi-App (opens new window))下载解压到工作目录
1、点击HBuilderx,菜单 文件 -> 打开目录,然后选择RuoYi-App项目,点击选择文件夹按钮,即可成功导入。
2、点击HBuilderx,菜单 运行 -> 运行到浏览器,然后选择浏览器类型,即可在浏览器里面访问。
3、运行成功可以通过(http://localhost:9090 (opens new window))访问,出现如下图页面表示成功运行。

# 必要配置
- 修改后端请求接口,编辑
RuoYi-App目录下的config.js
// 应用全局配置
module.exports = {
baseUrl: 'http://localhost:8080',
// 应用信息
appInfo: {
// 应用名称
name: "ruoyi-app",
// 应用版本
version: "1.0.0",
// 应用logo
logo: "/static/logo.png",
// 官方网站
site_url: "http://ruoyi.vip",
// 政策协议
agreements: [{
title: "隐私政策",
url: "https://ruoyi.vip/protocol.html"
},
{
title: "用户服务协议",
url: "https://ruoyi.vip/protocol.html"
}
]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 部署系统
温馨提示
因为本项目是APP和后端完全分离的,所以需要将后端也部署好,才能进行访问。 可以参考 (RuoYi-Vue后端部署流程 (opens new window))
当项目开发完毕,只需要点击HBuilderx,菜单 发行 -> 网站-PC WEB或手机H5,然后填好标题及域名,点击发行按钮,即可成功打包。
构建打包成功之后,会在根目录生成 unpackage/dist/build/h5 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。
如果是H5部署,推荐通过Nginx代理配置。将config.js的baseUrl换成/prod-api。
如何发布Android、IOS、小程序
也是一样的流程,发行的时候选择需要的方式。
小程序及APPbaseUrl使用域名或IP方式访问。
# Nginx配置
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-h5;
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_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
# 反向代理配置
proxy_pass http://localhost:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42