借助Vercel,实现0成本搭建属于自己的在线音乐播放器
本文最后更新于 190 天前,其中的内容可能已经过时
本来上一年8月要发的,结果没写完,现发出

经过我一小时的摸索与探究,最终我成功搭建成功一个属于自己的在线音乐播放器(不过只支持网易云),现在我就来分享我搭建的过程。

搭建需要用到两个开源仓库,

感谢这两位作者对开源事业做出的贡献!

他们之间的关系是

主程序需要请求API

还需要一个Github账号(没有?注册!

注意:Github在部分地区无法访问(移动访问也不稳定),Vercel速度勉强可以

开始

首先分别把两个仓库Fork到自己那

之后访问Vercel.com,按下图步骤操作

之后在Github授权登录,输入手机号码后进入到控制台,按图示操作

之后又是授权,直接点install即可(询问是否允许Vercel查看Github账号下所有仓库),授权后Vercel可以获取到你的仓库

部署API直接点击Inport即可,其它配置保持不变。之后Vercel那会有个新的仓库,下面有访问的链接会获取到Vercel给你的地址复制

好了,现在部署YesMusicPlayer主程序

点击对应仓库后的Inport,按图示操作

这个要点击skip跳过,Team版本似乎要收费(先给你免费14天)

点击 Environment Variables,填写 Name 为 VUE_APP_NETEASE_API_URL,Value 为部署的网易云 API 地址,点击 Add。最后点击底部的 Deploy 就可以部署到 Vercel 了。

这步很重要,虽然后期可以添加(在设置那),但是实测(因为前面我忘了这重要的一步)需要重新部署!

慢慢等待

之后控制台出现这个样子

说明你已经部署成功

不过Vercel.app(访问部署项目的域名)访问不是很好,所以。。。本文章就适合练练手吧。。。也算是一种实践操作

如无特殊声明,若雨博客内文章均为原创,转载请注明链接 https://lyrylo.com/ypm-vercel/

评论

  1. Windows Chrome 80.0.3987.163
    4月前
    2022-6-18 12:39:05

    看了你的文章,觉得非常不错
    想与贵站互相友情链接
    建站教程网-http://nizhidaole.cn
    如果同意的话,回复一下后互相上链接!
    名称:建站经验网 本站网址: http://nizhidaole.cn/
    本站描述: | 新老站长都喜欢的技术性优秀网站!.

    • 博主
      赵丽颖
      Android Chrome 92.0.4515.105
      3月前
      2022-6-22 16:23:25

      你得先加本站友链哦
      信息在首页

  2. Windows Edge 97.0.1072.76
    8月前
    2022-2-03 15:46:58

    杜老师说祝福博主新春快乐!

    • 博主
      Teacher Du
      Jetpack
      8月前
      2022-2-04 12:09:03

      谢谢祝福,也祝您节日快乐😁

  3. Macintosh Firefox 96.0
    8月前
    2022-1-28 22:23:24

    依旧是看不懂

    • 博主
      飞鱼先生
      Windows Edge 98.0.1108.33
      8月前
      2022-1-29 19:15:11

      我讲得还不是很详细。。。
      具体是哪里呢?

  4. 呆哥
    iPhone AppleWebKit 605.1.15
    9月前
    2022-1-20 11:05:53

    博客可以的

    • 博主
      呆哥
      Windows Edge 98.0.1108.27
      9月前
      2022-1-20 13:18:01

      谢谢大佬鼓励!

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
×
订阅图标按钮