宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

2020.05.18更新:最新版本的安装还是用这个方法,不过便宜vps主机编译了改程序的静态文件,所以你只要上传静态文件到自己的网站根目录即可访问,省心方便。在第八步中可以看到具体内容。

2019.12.13更新:vue-netease-music的设置域名访问的方法,第七步中看可以看到。并且新增了演示地址。

基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC) Online Music Player,据说是用 vue 全家桶模仿 mac 客户端的 ui 实现了一个,颜值确实不错。

这篇文章,我们就来说说如何利用宝塔面板实现这个高仿网易云mac客户端播放器(PC)。额,安装这个需要一台VPS,并且安装好宝塔面板。具体步骤如下。

具体的部署和安装


前言:

项目地址:https://github.com/sl1673495/vue-netease-music

演示:https://music.sl1673495.now.sh

简介:

  • Vue 全家桶 Vue-CLI3 create 出来的。
  • ui 库用了魔改样式的 element-ui
  • 歌词滚动部分用了黄轶老大的 better-scroll(贼爽)
  • 主题换肤用的 css 变量替换。
  • ES 6 / 7 (JavaScript 语言的下一代标准)
  • Sass(CSS 预处理器)
  • postcss-pxtorem(自动处理 rem,妈妈再也不用担心屏幕太大太小了)

1、环境配置

宝塔面板:这个自己安装好,目前最新版本是7.0.3

PM2管理器 4.2.2:node.js管理器,内置 node.js + npm + nvm + pm2.!

2、安装模块

安装PM2管理器之后,我们需要安装几个模块,‘PM2管理器’→‘模块管理’需要安装3个模块:vue、vue-cli、cnpm,具体安装如图:

注意:

输入模块,点击安装即可,全部安装好如上图。

3、安装程序

3.1安装screen


因为需要在后台运行程序,所以这里就通过screen来运行,如果你安装过了可以无视,没安装的命令如下:

yum install screen

3.2安装程序


我们在screen下面进行安装,命令如下:

此处为隐藏的内容 发表评论并刷新,方可查看
发表评论 等待安装结束即可,最后安装成功的截图如下:

注意:

  1. Local: http://localhost:8888/
  2. Network:你服务器ip:8888    浏览器中需要用这个地址才能打开。

4、效果

效果确实不错,截图如下:


5、登录

vue-netease-music是支持在线登录的,如下:

  1. 请 点我(http://music.163.com)打开网易云音乐官网
  2. 点击页面右上角的“登录”
  3. 点击您的头像,进入我的主页
  4. 复制浏览器地址栏 /user/home?id= 后面的数字(网易云 UID)

6、设置域名访问

如果不能用域名去访问中感觉美中不足,所以这个播放器,我们还是需要用域名来访问,具体如何操作,还是一样,宝塔面板中新建网站,设置好域名访问。之后再‘网站设置’→‘方向代理’中设置,具体看图:

7、Invalid-Host-header

当让这样你用域名打开之后还是不能访问,浏览器会显示‘Invalid Host header’错误,如何修改?我们找到文件夹‘vue-netease-music’→‘vue.config.js’,编辑‘vue.config.js’这个文件,然后在第五行也就是‘devServer: {’下面添加一行代码,如下:

输入验证码查看隐藏内容

扫描二维码关注本站微信公众号
便宜vps主机 或者在微信里搜索
便宜vps主机 回复
我要看看 获取验证码
便宜vps主机 不会就看截图吧。

浏览器刷新,发现已经可以打开访问了,问题解决。

8、开箱即食

编译了静态文件,宝塔面板用户只要新建一个网站,然后上传静态文件到自己的网站根目录即可访问,开箱即食。下载地址如下:

此处为隐藏的内容 发表评论并刷新,方可查看
发表评论

9、最后

用宝塔面板安装貌似会更简单一点,当然你用别的linux环境安装也是可以的,还可以在本地电脑安装,有空试试。推荐用国内的VPS安装,这样打开速度会快一点。

设置域名访问,稍微麻烦点,具体就根据教程来设置吧。不过已经编译了打包了该程序,目前只需要上传静态文件即可使用。