config.js
首先,在项目根目录下的 config.js
文件中设置应用的全局配置,如下所示:
// 全局应用配置
module.exports = {
baseUrl: 'https://vue.ruoyi.vip/prod-api', // 使用线上 API 地址
// baseUrl: 'http://localhost:8080', // 可选:使用本地 API 地址
// 应用相关信息
appInfo: {
name: "ruoyi-app", // 应用名称
version: "1.0.0", // 应用版本
logo: "/static/logo.png", // 应用 Logo
site_url: "http://ruoyi.vip", // 官方网站地址
agreements: [
{
title: "隐私政策",
url: "https://ruoyi.vip/protocol.html"
},
{
title: "用户服务协议",
url: "https://ruoyi.vip/protocol.html"
}
]
}
}
前提:RuoYi-App 是前后端分离的项目,因此在部署前,需要确保 RuoYi-Vue 的后端已经成功部署。
可以参考RuoYi-Vue 后端部署教程:https://gitee.com/y_project/RuoYi-Vue
完成项目开发后,使用 HBuilderx
进行打包发布。具体步骤如下:
1. 点击菜单栏中的 发行
-> 网站-PC WEB 或手机 H5
。
2. 输入项目的标题和域名信息。
3. 点击 发行
按钮,系统会生成打包文件。
打包成功后,生成的静态资源文件会位于 unpackage/dist/build/h5
文件夹中,包含了 ***.js
、***.css
、index.html
等文件。这些静态文件可以发布到你的 nginx
或其他静态服务器上,index.html
是该应用的入口页面。
如果是 H5 部署,建议通过 Nginx 代理的方式进行配置,并将 config.js
中的 baseUrl
修改为 /prod-api
。
发布 Android、iOS、小程序:
发布流程与 H5 类似。在HBuilderx
中选择对应的发行方式即可。小程序和 APP 的baseUrl
使用域名或 IP 进行访问。
在服务器上配置 Nginx 用于部署 RuoYi-App 项目的 H5 版本,以下为基本配置示例:
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; // H5 文件的存放目录
try_files uriuri/ /index.html; // 匹配路径处理
index index.html index.htm;
}
# 代理后端 API 请求
location /prod-api/ {
proxy_set_header Host http_host;
proxy_set_header X-Real-IPremote_addr;
proxy_set_header REMOTE_HOST remote_addr;
proxy_set_header X-Forwarded-Forproxy_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;
}
}
}
通过以上配置,RuoYi-App
的 H5 版本即可在服务器上运行,并通过 Nginx 代理与后端服务进行通信。
powered by kaifamiao