基于Vercel部署mac风格网易云音乐

2021 年 02 月 23 日

1277 次浏览

1150字数

# 前言

昨天在Github上发现了一个网易云音乐的项目，[vue-netease-music](https://github.com/sl1673495/vue-netease-music)它是基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器，已经有1.5k的star。根据他给的演示地址发现几乎实现了所有的网易云功能(不包括需要VIP的部分)。但是他的README写的很简陋，很多小白不知道如何搭建，担心需不需要域名和服务器。。本教程的部署方法是不需要域名和服务器的，只需要简单的几步就可以部署成功。请提前准备好Github账号。

# 部署方法

1. 首先fork项目到自己的Github仓库：https://github.com/sl1673495/vue-netease-music
2. 进入[Vercel](https://vercel.com/)选择Github登录，点击 `New Project`。
3. 在搜索框内搜索项目名称，并点击`import`导入项目。
   ![导入项目](https://www.imgyh.com/usr/uploads/2022/12/4117333125.jpg)
4. 之后选择项目所有者。
   ![选择所有者](https://www.imgyh.com/usr/uploads/2022/12/2652653412.jpg)
5. 接下来进行部署的设置，`PROJECT NAME`随便起一个，`FRAMEWORK PRESET`自动识别的不用管。需要注意的是`Build and Output Settings`，勾选`OUTPUT DIRECTORY`后的按钮，并将`dist`改为`music`，这是编译后的输出目录，因为编译好后的文件输出在`music`目录下，不是`dist`所以需要修改。
   ![部署设置](https://www.imgyh.com/usr/uploads/2022/12/204739980.jpg)
6. 最后点击下面的`Deploy`等待3分钟左右就会出现烟花的景象，代表部署成功。
   ![部署成功](https://www.imgyh.com/usr/uploads/2022/12/1856605125.jpg)
7. 点击`visit`即可查看，点击`open dashbord`可进行相应设置。点击`setting`->`domains`可以添加自定义域名。

# 参考资料

[无需服务器和域名快速搭建部署Vue仿网易云](https://blog.imzjw.cn/posts/vue-netease-music/)

最后修改：2022 年 12 月 20 日