Folia 移动端部署完整指南：如何把全屏歌词动画播放器装进手机主屏幕

Folia 移动端部署完整指南如何把全屏歌词动画播放器装进手机主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major手机里缺一个能看歌词动画的音乐播放器Folia 主打全屏歌词动画支持网易云、QQ 音乐、酷狗等在线音源。本文教你十分钟内把它的 Web 版装进手机主屏幕点开就是独立 App。做完你能得到什么主屏幕多一个 Folia 图标点它直接全屏启动没有地址栏。登录任一音源后即可搜索播放竖屏时歌词动画会按窗口尺寸实时重排。选一条更轻的路线路线费用技术门槛域名/证书适合谁免费平台Vercel免费低点按钮即可平台自带 HTTPS绝大多数人NAS 自架Docker已有设备中需装 Docker需另配反向代理有 NAS 的人桌面端 Electron免费最低不需要只要电脑用没有设备、只想马上用的选第一条家里已有 NAS 且想要私有部署的选第二条。照着四步装好第一首歌克隆仓库git clone https://gitcode.com/GitHub_Trending/fo/folia-major在 docs/technical.md 找到 Deploy with Vercel 按钮点击创建项目并关联仓库平台分配一个 HTTPS 地址。在平台的环境变量设置里补VITE_NETEASE_API_BASE填你的网易云 API 实例地址VITE_QQ_API_BASE填/api/qqQQ_SESSION_SECRET存为 SecretQQ 变量说明见 docs/qq-music-deployment.md。重新部署后手机浏览器打开该地址首页正常渲染即成功。安卓 Chrome 点右上角三点菜单选添加到主屏幕或安装应用iPhone Safari 点底部分享图标选添加到主屏幕。看到 Folia 图标出现在桌面即成功。项目 PWA 声明见 vite.config.tsdisplay为standaloneiOS 全屏标签已内置两端无需额外配置。点开图标选网易云、QQ 音乐或酷狗扫码登录接 Navidrome 则在账户页填地址与账号。搜到歌、动画开始全流程结束。Docker 路线把 deploy/docker/compose.yaml 和.env.example放入同一目录.env里填FOLIA_IMAGE_NAMESPACEpapersman用openssl rand -hex 32生成SYNC_TOKEN至少八位QQ 用户再补QQ_SESSION_SECRET。执行docker compose up -d浏览器访问http://NAS-IP:18080细节见 deploy/docker/README.md。常见问题装不进主屏幕PWA 安装要求安全上下文裸 HTTP 站点不满足。改用 HTTPS 地址安卓用 Chrome、iPhone 用 Safari刷新一次。重新部署后手机还是旧界面Service Worker 按 autoUpdate 策略更新时机不可控。清除一次站点数据或移除图标后重新添加。QQ 音乐入口点不动serverless 形态缺VITE_QQ_API_BASE与QQ_SESSION_SECRET两个变量。补齐后必须重新构建部署该变量是构建时写进前端的。Navidrome 自动登录没生效NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项只填了部分或 URL 不是完整 http(s) 地址。补齐三项并确认可从手机直连该地址再重建 backend 容器。手机想听本地音乐文件目录导入依赖 File System Access API只有桌面 Chromium 系浏览器提供手机浏览器没有入口替代路线走 Navidrome。弱网能离线吗界面资源有 Service Worker 缓存页面能很快打开但音乐流必须走网络做不到完全离线。一条地址、一次添加Folia 就成了口袋里的全屏歌词动画播放器换设备时浏览器里再走一遍添加到主屏幕即可。部署细节与环境变量从 docs/technical.md 或 deploy/docker/README.md 入手。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考