SPlayer网页部署指南 - 部署一个免费强大的第三方网易云音乐播放器
在开始前说一个坏消息, 现在MoeFurina也被封号了, 已经发出申诉但是一点反应都没有, 估计没法自部署了
IamFurina这个作者被封号了, 所以使用了MoeFurina账号继续更新
以下是归档内容
SPlayer是一款基于Vue 3和Electron开发的网易云音乐第三方客户端,具有美观的界面和丰富的功能。本教程将详细介绍如何通过Vercel平台免费部署SPlayer网页版。
一、部署前准备
1. 注册必要账号
2. 了解项目依赖
SPlayer需要以下两个API服务支持:
- 网易云音乐API Enhanced(Reborn增强版本)
- 提供核心音乐服务
- TTML歌词API(可选) - 提供歌词服务
二、部署网易云音乐API
方法一:一键部署(推荐)
- 点击下方按钮直接部署到Vercel:
- 等待部署完成,记下生成的域名(如
https://api-xxx.vercel.app
)
> 尽量使用自己的域名, 默认域名已经被大陆墙了
方法二:手动部署
# 克隆仓库
git clone https://github.com/neteasecloudmusicapienhanced/api-enhanced.git
# 进入目录
cd api-enhanced
# 安装依赖
pnpm install
# 本地测试
pnpm start
三、部署TTML歌词API(可选)
- 点击下方按钮部署:
- 记下部署后的域名
> 一定要使用自己的域名, 默认域名已经被大陆墙了
四、部署SPlayer主体
方法一:Fork仓库部署(推荐)
- 访问SPlayer GitHub仓库
- 点击右上角"Fork"按钮,复制到你的账号
- 在Vercel控制台点击"New Project"
- 选择你Fork的SPlayer仓库
在配置页面进行以下设置:
- Framework Preset: 选择"Vue"
- Build Command:
pnpm build
或npm run build
- Output Directory:
out/renderer
- Environment Variables:
现在配置文件已经设置好构建目录和框架, 直接点击配置环境变量即可
```
RENDERER_VITE_SERVER_URL = "你的网易云API地址"
RENDERER_VITE_SITE_URL = "你的SPlayer部署地址"
```
- 点击"Deploy"开始部署,部署完成后配置域名 (一定要配置!)
方法二:手动部署
克隆仓库:
git clone https://github.com/MoeFurina/SPlayer.git cd SPlayer
复制环境变量文件:
cp .env.example .env
编辑
.env
文件:RENDERER_VITE_SERVER_URL="你的网易云API地址" RENDERER_VITE_SITE_URL="你的SPlayer部署地址"
安装依赖:
pnpm install
构建项目:
pnpm build
将
out/renderer
目录上传到你的托管服务
五、配置自定义域名(可选)
- 在Vercel项目控制台点击"Domains"
- 输入你想绑定的域名
- 按照提示配置DNS解析
六、更新维护
更新SPlayer
- 进入你Fork的仓库
- 点击"Sync fork"同步最新代码
- Vercel会自动触发重新部署
更新API服务
API服务更新只要你启用了Github Action, Action会自动同步最新内容, Vercel也会自动部署
服务器更新需要重新部署
七、常见问题解决
1. Vercel构建失败
- 检查
out/renderer
目录是否正确设置 - 确认环境变量配置正确
2. 跨域问题
确保.env
文件中:
RENDERER_VITE_SERVER_URL = "你的API地址"
RENDERER_VITE_SITE_URL = "你的前端地址"
3. 登录功能异常
- 检查API服务是否正常运行
- 确认网络没有被防火墙拦截
4.以上都不是我遇到的问题
- 加入QQ群423016289, 向群主或管理员询问问题
八、高级配置
使用同级域名API
在vercel.json
中添加:
{
"rewrites": [
{
"source": "/:path*",
"destination": "/index.html"
},
{
"source": "/api/:apiurl*",
"destination": "https://你的API域名/:apiurl*"
}
]
}
.env配置:
RENDERER_VITE_SITE_ROOT=true
九、项目特点
- 美观界面:基于Naïve UI的现代化设计
完整功能:
- 扫码/手机号登录
- 每日自动签到
- Hi-Res音质下载
- 歌词显示与翻译
- MV播放
- 私人FM
多端适配:支持Web和Electron桌面端
十、注意事项
- 本项目仅供学习交流使用
- 请勿用于商业用途
- 遵守AGPL-3.0开源协议
- 网易云音乐API可能不稳定,建议自建API服务
通过本教程,你应该已经成功在Vercel上部署了自己的SPlayer音乐播放器。如有任何问题,可以参考项目GitHub仓库的Issue部分或提交新的Issue。