# BeeMusic

**Repository Path**: miyagi-jiye/BeeMusic

## Basic Information

- **Project Name**: BeeMusic
- **Description**: 高颜值的第三方网易云播放器，网页版+electron套壳
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-20
- **Last Updated**: 2024-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3, Pinia, Electron, element-plus

## README

<br />
<p align="center">
  <a href="http://guowei.fun" target="blank">
    <img src="img/logo.png" alt="Logo" width="156" height="156">
  </a>
  <h2 align="center" style="font-weight: 600">BeeMusic</h2>

  <p align="center">
    高颜值的第三方网易云播放器
    <br />
    <a href="http://miyagi-jiye.gitee.io/vite3-vue3.2-wyy-music" target="blank">
      <strong>🌎 访问DEMO</strong>
    </a>
    <br />
    Tip : 如访问数据加载失败请查看链接是否为 http
  </p>
</p>

## ✨ 特性

- ✅ 使用 Vue.js 全家桶开发
- 🔴 网易云账号登录（扫码/手机登录）
- 📺 支持 MV 播放
- 📃 支持歌词显示
- 📻 支持私人 FM / 每日推荐歌曲
- 🚫🤝 无任何社交功能
- ✔️ 每日自动签到（手机端和电脑端同时签到）
- 🌚 Light/Dark Mode 自动切换
- 📱 移动端适配
- 🛠 更多特性开发中

## 🖼️ 截图

<div style="display:flex;flex-direction:column;gap:10px;">
  <img src="img/discover.png" alt="截图" width="auto" height="auto">
  <img src="img/albumDetail.png" alt="截图" width="auto" height="auto">
  <img src="img/altistDetail.png" alt="截图" width="auto" height="auto">
  <img src="img/artist.png" alt="截图" width="auto" height="auto">
  <img src="img/login.png" alt="截图" width="auto" height="auto">
  <img src="img/loginAfter.png" alt="截图" width="auto" height="auto">
  <img src="img/loginAfter1.png" alt="截图" width="auto" height="auto">
  <img src="img/lyricPlayer.png" alt="截图" width="auto" height="auto">
  <img src="img/music.png" alt="截图" width="auto" height="auto">
  <img src="img/playList.png" alt="截图" width="auto" height="auto">
  <img src="img/playlistDetail.png" alt="截图" width="auto" height="auto">
  <img src="img/recommend.png" alt="截图" width="auto" height="auto">
  <img src="img/search.png" alt="截图" width="auto" height="auto">
  <img src="img/searchDetail.png" alt="截图" width="auto" height="auto">
  <img src="img/searchDetail1.png" alt="截图" width="auto" height="auto">
  <img src="img/userDetail.png" alt="截图" width="auto" height="auto">
  <img src="img/userDetail1.png" alt="截图" width="auto" height="auto">
  <img src="img/userDetail2.png" alt="截图" width="auto" height="auto">
  <img src="img/video.png" alt="截图" width="auto" height="auto">
  <img src="img/videoDetail.png" alt="截图" width="auto" height="auto">
</div>

## 😀快速开始

运行本项目

```shell
# 安装依赖
npm install

# 运行（网页端）
npm run dev

# 运行（electron），需要先运行网页端
npm run electron
```

## 📦️ 打包成 windows 安装包

1. 编译打包

```sh
npm run build
npm run packager
```
2. 打包完成后，会在 `outputs` 目录下生成 `BeeMusic.exe` 安装包，直接双击即可使用

## ⚙️ 部署到自己的服务器


1. 部署网易云 API，详情参见 [Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
2. 克隆本仓库

```sh
git clone --recursive https://gitee.com/miyagi-jiye/vite3-vue3.2-wyy-music.git
```

3. 安装依赖

```sh
npm install
```

4. （可选）使用 Nginx 反向代理 API，将 API 路径映射为 `/api`，如果 API 和网页不在同一个域名下的话（跨域），会有一些 bug。

5. 修改 `src/axios/index.js` 生产环境API地址里面的值为你部署的网易云 API 地址。本地开发的话可以填写 API 地址为 `http://localhost:3000/`。。

```js
// 本地环境
axios.defaults.baseURL = 'http://localhost:3000/';
// 线上环境
axios.defaults.baseURL = '可更换为你部署的API服务器地址';
```

6. 编译打包

```sh
npm run build
```

7. 将 `/dist` 目录下的文件上传到你的 Web 服务器

## 💻: 配置开发环境

本项目由 [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 提供 API。


## ☑️ Todo

1. [ ] 歌词翻译切换  
2. [ ] 主题自定义换肤
3. [x] 移动端适配

欢迎提 Issue 和 Pull request。

## 📜 开源许可

本项目仅供个人学习研究使用，禁止用于商业及非法用途。

基于 [MIT license](https://opensource.org/licenses/MIT) 许可进行开源。

## 灵感来源

API 源代码来自 [Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)

- [QQ音乐](https://y.qq.com)
- [网易云音乐](https://music.163.com)