# 环境部署

# 准备工作

如果使用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-login

# 必要配置

  • 修改后端请求接口,编辑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"
      }
    ]
  }
}

1
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***.cssindex.html 等静态文件。

通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可,其中的 index.html 是后台服务的入口页面。

如果是H5部署,推荐通过Nginx代理配置。将config.jsbaseUrl换成/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;
        }
    }
}
1
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

# Tomcat配置

参考tomcat配置