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

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

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

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

前言：

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

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

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来运行，如果你安装过了可以无视，没安装的命令如下：

3.2安装程序

4、效果

5、登录

vue-netease-music是支持在线登录的，如下：

6、设置域名访问

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

7、Invalid-Host-header

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

输入验证码查看隐藏内容

扫描二维码关注本站微信公众号大鸟博客

或者在微信里搜索大鸟博客

回复我要看看获取验证码

不会就看截图吧。

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

8、开箱即食

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

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

9、最后

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

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