mmPlayer 是由茂茂开源的一款在线音乐播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能。
20233ApNsRIppny.webp

目录

https://github.com/maomao1996/Vue-mmPlayer

模仿 QQ 音乐网页版界面，采用 flexbox 和 position 布局；mmPlayer 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配；只做主流浏览器兼容

安装与使用

检查 node 版本

# 查看 node 版本，确保 node 版本高于 12 版本
node -v

mmPlayer

# 下载 mmPlayer
git clone https://github.com/maomao1996/Vue-mmPlayer

# 进入 mmPlayer 播放器目录
cd Vue-mmPlayer

# 安装依赖 推荐使用 pnpm
pnpm install
# 或者
npm install

# 本地运行 mmPlayer
npm run serve

# 编译打包
npm run build

后台 api 服务（本地开发）

如何搭建网易云音乐 API

# 下载 NeteaseCloudMusicApi
git clone --depth=1 https://github.com/Binaryify/NeteaseCloudMusicApi

# 进入 NeteaseCloudMusicApi 后台服务目录
cd NeteaseCloudMusicApi

# 安装依赖
npm install

# 运行后台 api 服务 访问 http://localhost:3000
node app.js

注意点

运行 mmPlayer 后无法获取音乐请检查后台 api 服务是否启动(即控制台请求报 404)
线上部署不是直接将整个项目丢到服务器，再去运行 npm run serve 命令
项目打包前 VUE_APP_BASE_API_URL 必须改后台 api 服务地址为线上地址，不能是本地地址

关于项目线上部署

最近有不少小伙伴部署出了问题，我在这说明下

  • 后台 api 服务线上部署
    • 你需要将 NeteaseCloudMusicApi 下载
    • 然后将下载的文件上传至服务器
    • 再通过 pm2 去启动服务(pm2 安装和相关命令网上有很多，这里不再赘述)
    • 最后通过服务器 ip + 端口号访问验证 api 服务是否启动成功
  • mmPlayer 线上部署（推荐使用 Vercel 部署）
    • 首先要注意的是
    • 先将 .env 文件的 VUE_APP_BASE_API_URL 修改成上一步启动的后台 api 服务地址(服务器 ip + 端口号或者你绑定的域名)
    • 然后先在本地运行 npm run build 命令，会打包在生成一个 dist 文件
    • 最后将打包的 dist 文件上传到你的网站服务器目录即可

Vercel 部署

  1. fork 此项目
  2. 在 Vercel 官网点击 New Project
  3. 点击 Import Git Repository
    1. 选择你 fork 的此项目
    2. 点击 import
  4. Configure Project 配置
    1. Project Name 自己填
    2. Framework Preset 选 Vue.js （基本默认就是，不用修改）
    3. 点击 Environment Variables，并添加一条
      1. key 输入 VUE_APP_BASE_API_URL
      2. value 输入你后台 api（NeteaseCloudMusicApi）服务的线上地址
  5. 点击 Deploy 等部署完成即可

 

#修改标题和提示话语

1.路径src/App.vue和src/components/mm-header/mm-header.vue

2.路径mmPlayer/public/index.html以及 src/pages/music.vue 自己搜索关键词修改

结构目录


├── public                              // 静态资源目录
│   └─index.html                        // 入口 html 文件
├── screenshots                         // 项目截图
├── src                                // 项目源码目录
│   ├── api                            // 数据交互目录
│   │   └── index.js                   // 获取数据
│   ├── assets                         // 资源目录
│   │   └── background                 // 启动背景图目录
│   │   └── img                        // 静态图片目录
│   ├── base                           // 公共基础组件目录
│   │   ├── mm-dialog
│   │   │   └── mm-dialog.vue          // 对话框组件
│   │   ├── mm-icon
│   │   │   └── mm-icon.vue            // icon 组件
│   │   ├── mm-loading
│   │   │   └── mm-loading.vue         // 加载动画组件
│   │   ├── mm-no-result
│   │   │   └── mm-no-result.vue       // 暂无数据提示组件
│   │   ├── mm-progress
│   │   │   └── mm-progress.vue        // 进度条拖动组件
│   │   └── mm-toast
│   │        ├── index.js                // mm-toast 组件插件化配置
│   │        └── mm-toast.vue            // 弹出层提示组件
│   ├── components                      // 公共项目组件目录
│   │   ├── lyric
│   │   │   └── lyric                   // 歌词和封面组件
│   │   └── mm-header
│   │   │   └── mm-header.vue           // 头部组件
│   │   ├── music-btn
│   │   │   └── music-btn.vue            // 按钮组件
│   │   ├── music-list
│   │   │    └── music-list.vue           // 列表组件
│   │   └── volume
│   │        └── volume.vue              // 音量控制组件
│   ├── pages                            // 页面组件目录
│   │   ├── comment
│   │   │   └── comment.vue               // 评论
│   │   ├── details
│   │   │   └── details.vue             // 排行榜详情
│   │   ├── historyList
│   │   │   └── historyList.vue        // 我听过的（播放历史）
│   │   ├── playList
│   │   │   └── playList.vue           // 正在播放
│   │   ├── search
│   │   │   └── search.vue           // 搜索
│   │   ├── topList
│   │   │   └── topList.vue          // 排行榜页面
│   │   ├── userList
│   │   │   └── userList.vue        // 我的歌单
│   │   ├── mmPlayer.js             // 播放器事相关件绑定
│   │   └── music.vue               // 播放器主页面
│   ├── router
│   │   └── index.js                // 路由配置
│   ├── store                       // vuex 的状态管理
│   │   ├── actions.js              // 配置 actions
│   │   ├── getters.js              // 配置 getters
│   │   ├── index.js                // 引用 vuex，创建 store
│   │   ├── mutation-types.js       // 定义常量 mutations 名
│   │   ├── mutations.js            // 配置 mutations
│   │   └── state.js                // 配置 state
│   ├── styles                      // 样式文件目录
│   │   ├── index.less              // mmPlayer 相关基础样式
│   │   ├── mixin.less              // 样式混合
│   │   ├── reset.less              // 样式重置
│   │   └── var.less                // 样式变量（字体大小、字体颜色、背景颜色）
│   ├── js                          // 数据交互目录
│   │   ├── axios.js                // axios 简单封装
│   │   ├── hack.js                 // 修改 nextTick
│   │   ├── mixin.js                // 组件混合
│   │   ├── song.js                 // 数据处理
│   │   ├── storage.js               // localStorage 配置
│   │   └── util.js                 // 公用 js 方法
│   ├── App.vue                     // 根组件
│   ├── config.js                   // 配置文件（播放器默认配置、版本号等）
│   └── main.js                     // 入口主文件
└── vue.config.js                   // vue-cli 配置文件
© 版权声明
分享是一种美德，转载请保留原链接