guoyu/Test/md/视频播放配置指南.md

视频播放配置指南

问题背景

项目中有两个前端：

1. 后台管理系统 (ry-study-ui) - 运行在浏览器中
2. 移动端APP (fronted_uniapp) - 运行在手机APP中

两者访问视频文件的方式不同，需要分别配置。

---

一、本地开发环境配置

1. 后台管理系统 (ry-study-ui)

配置文件: vue.config.js

需要配置 /profile 代理，将静态文件请求转发到后端：

proxy: {
  '/dev-api': {
    target: baseUrl,  // http://localhost:30091
    changeOrigin: true,
    pathRewrite: { '^/dev-api': '' }
  },
  // 静态文件代理（视频、图片等）
  '/profile': {
    target: baseUrl,  // http://localhost:30091
    changeOrigin: true,
    secure: false
  }
}

配置文件: src/utils/ruoyi.js

getFileBaseUrl() 函数返回空字符串，让请求通过代理：

export function getFileBaseUrl() {
  let fileBaseUrl = process.env.VUE_APP_FILE_BASE_URL
  if (!fileBaseUrl) {
    fileBaseUrl = ''  // 使用相对路径，通过代理转发
  }
  return fileBaseUrl
}

2. 移动端APP (fronted_uniapp)

配置文件: utils/config.js

APP直接访问后端服务器，不经过代理：

const DEFAULT_SERVER_HOST = '192.168.1.164'  // 服务器IP地址
const DEFAULT_SERVER_PORT = 30091

let API_BASE_URL = `http://${serverHost}:${serverPort}`
let FILE_BASE_URL = API_BASE_URL + '/profile'

注意: 真机测试必须使用IP地址，不能用 localhost！

---

二、Windows服务器部署配置（无Nginx）

部署架构

Windows服务器 (IP: your-server-ip)
├── Spring Boot 后端服务 (端口: 30091)
│   ├── 提供 API 接口 (/api/*)
│   ├── 提供静态文件 (/profile/*)
│   └── 托管前端静态文件 (/)
└── 文件存储目录 (D:/ruoyi/uploadPath/)

1. 后端配置

配置文件: application.yml

server:
  port: 30091

ruoyi:
  profile: D:/ruoyi/uploadPath  # Windows文件存储路径

静态资源映射: ResourcesConfig.java

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    // 本地文件上传路径映射
    registry.addResourceHandler("/profile/**")
            .addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
    
    // 前端静态文件（如果前端打包后放在后端static目录）
    registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/");
}

2. 后台管理系统打包部署

步骤1: 修改生产环境配置

配置文件: .env.production

ENV = 'production'
VUE_APP_BASE_API = ''
# 生产环境直接访问后端，不需要/api前缀

步骤2: 打包前端

cd ry-study-ui
npm run build:prod

步骤3: 部署方式（二选一）

方式A: 将 dist 目录内容复制到后端的 src/main/resources/static/ 目录，重新打包后端jar

方式B: 使用独立的静态文件服务器（如IIS）托管 dist 目录

3. 移动端APP配置

配置文件: utils/config.js

const DEFAULT_SERVER_HOST = 'your-server-ip'  // Windows服务器IP
const DEFAULT_SERVER_PORT = 30091  // 后端端口

let API_BASE_URL = `http://${serverHost}:${serverPort}`
let FILE_BASE_URL = API_BASE_URL + '/profile'

---

三、关键问题：APP在服务器上无法播放视频

可能原因

1. 防火墙问题: Windows防火墙阻止了30091端口
2. IP地址问题: APP配置的IP地址不正确
3. 网络问题: 手机和服务器不在同一网络

解决方案

1. 开放Windows防火墙端口

# 以管理员身份运行PowerShell
netsh advfirewall firewall add rule name="Study Backend 30091" dir=in action=allow protocol=tcp localport=30091

或者通过Windows防火墙图形界面：

1. 控制面板 -> Windows Defender 防火墙 -> 高级设置
2. 入站规则 -> 新建规则
3. 选择"端口" -> TCP -> 特定本地端口: 30091
4. 允许连接 -> 完成

2. 检查APP配置的服务器地址

确保 fronted_uniapp/utils/config.js 中的地址是服务器的实际IP：

const DEFAULT_SERVER_HOST = '服务器实际IP地址'  // 不是localhost！
const DEFAULT_SERVER_PORT = 30091

3. 测试视频URL是否可访问

在手机浏览器中直接访问视频URL测试：

http://服务器IP:30091/profile/upload/2025/12/05/video.mp4

如果能播放，说明服务器配置正确，问题在APP端。 如果不能播放，检查防火墙和后端服务。

---

四、URL路径说明

视频文件在数据库中存储的路径格式：/profile/upload/2025/12/05/video.mp4

后台管理系统访问流程（本地开发）:

浏览器请求: http://localhost:20002/profile/upload/...
    ↓
Vue代理: 转发到 http://localhost:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件

后台管理系统访问流程（服务器部署）:

浏览器请求: http://服务器IP:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件

APP访问流程:

APP请求: http://服务器IP:30091/profile/upload/...
    ↓
后端Spring: 映射到 D:/ruoyi/uploadPath/upload/...
    ↓
返回视频文件

---

五、总结

环境	后台管理系统	APP
本地开发	通过vue代理访问 localhost:20002/profile	直接访问 http://IP:30091/profile
Windows服务器	直接访问 http://IP:30091/profile	直接访问 http://IP:30091/profile

关键点：

1. 本地开发: 后台管理系统需要vue代理配置
2. 服务器部署: 两端都直接访问后端30091端口
3. Windows防火墙: 必须开放30091端口
4. APP配置: 必须使用服务器实际IP，不能用localhost