基于 Vue 的在线音乐播放器mmPlayer搭建部署

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 输入你后台 apiNeteaseCloudMusicApi)服务的线上地址
  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 配置文件
本站资源来自于互联网收集,仅供用于学习和交流,不得用于商业用途,请遵循相关法律法规。如遇欺诈广告或损害用户利益请第一时间联系我们邮箱:362813278@qq.com或者QQ:362813278处理!
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录