IamFurina这个作者被封号了, 所以使用了MoeFurina账号继续更新

SPlayer是一款基于Vue 3和Electron开发的网易云音乐第三方客户端，具有美观的界面和丰富的功能。本教程将详细介绍如何通过Vercel平台免费部署SPlayer网页版。

一、部署前准备

1. 注册必要账号

• GitHub账号
• Vercel账号（推荐使用GitHub账号直接登录）

2. 了解项目依赖

SPlayer需要以下两个API服务支持：

1. 网易云音乐API Enhanced(Reborn增强版本)
   • 提供核心音乐服务
2. TTML歌词API（可选） - 提供歌词服务

二、部署网易云音乐API

方法一：一键部署（推荐）

1. 点击下方按钮直接部署到Vercel：

2. 等待部署完成，记下生成的域名（如https://api-xxx.vercel.app）
   > 尽量使用自己的域名, 默认域名已经被大陆墙了

方法二：手动部署

# 克隆仓库
git clone https://github.com/neteasecloudmusicapienhanced/api-enhanced.git

# 进入目录
cd api-enhanced

# 安装依赖
pnpm install

# 本地测试
pnpm start

三、部署TTML歌词API（可选）

1. 点击下方按钮部署：

2. 记下部署后的域名
   > 一定要使用自己的域名, 默认域名已经被大陆墙了

四、部署SPlayer主体

方法一：Fork仓库部署（推荐）

1. 访问SPlayer GitHub仓库
2. 点击右上角"Fork"按钮，复制到你的账号
3. 在Vercel控制台点击"New Project"
4. 选择你Fork的SPlayer仓库

5. 在配置页面进行以下设置：

   • 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部署地址"
```

6. 点击"Deploy"开始部署，部署完成后配置域名 （一定要配置！）

方法二：手动部署

1. 克隆仓库：

   BASH

   git clone https://github.com/MoeFurina/SPlayer.git
   cd SPlayer
   

2. 复制环境变量文件：

   BASH

   cp .env.example .env
   

3. 编辑.env文件：

   ENV

   RENDERER_VITE_SERVER_URL="你的网易云API地址"
   RENDERER_VITE_SITE_URL="你的SPlayer部署地址"
   

4. 安装依赖：

   BASH

   pnpm install
   

5. 构建项目：

   BASH

   pnpm build
   

6. 将out/renderer目录上传到你的托管服务

五、配置自定义域名（可选）

1. 在Vercel项目控制台点击"Domains"
2. 输入你想绑定的域名
3. 按照提示配置DNS解析

六、更新维护

更新SPlayer

1. 进入你Fork的仓库
2. 点击"Sync fork"同步最新代码
3. 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

九、项目特点

1. 美观界面：基于Naïve UI的现代化设计

2. 完整功能：

   • 扫码/手机号登录
   • 每日自动签到
   • Hi-Res音质下载
   • 歌词显示与翻译
   • MV播放
   • 私人FM

3. 多端适配：支持Web和Electron桌面端

十、注意事项

1. 本项目仅供学习交流使用
2. 请勿用于商业用途
3. 遵守AGPL-3.0开源协议
4. 网易云音乐API可能不稳定，建议自建API服务

通过本教程，你应该已经成功在Vercel上部署了自己的SPlayer音乐播放器。如有任何问题，可以参考项目GitHub仓库的Issue部分或提交新的Issue。