无需服务器和域名快速搭建部署Vue仿网易云

前言

今天偶然间在 GitHub 上发现了一个 Star 1.4k 的基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器的项目，深深的被 ✔引，没有把持住，因此无聊就玩了玩，随便也记录了一下，便有了此篇文章，大概一首歌的时间就搭建好了。

首先把项目 clone 下来到本地

1	git clone https://github.com/sl1673495/vue-netease-music.git

如果 clone 较慢的话可以用这个地址

1	git clone https://github.com.cnpmjs.org/sl1673495/vue-netease-music.git

clone 到本地之后先执行 npm i 安装依赖，你就会发现项目里多了个 node_modules，这里面其实就是装了这个项目所依赖的所有依赖包

npm 慢的话可以设置代理

1	npm config set https-proxy "http://127.0.0.1:7890" # 端口是根据你的代理是啥端口就是啥端口

取消代理命令

1	npm config delete https-proxy

很不推荐 cnpm，实在没办法那就用 cnpm 吧！

当安装完依赖之后，我们输入 npm run dev，可以在本地运行调式，默认端口是 8888，当然你也可以在 vue.config.js 里面更改

本地调式完无误之后我们直接输入 npm run build 进行打包，就会生成个打包后的目录：music

部署方式本文就讲两种，Vercel 和 Gitee （码云）更推荐 Vercel，当然还有 Netlify，会的话就自己整哦！

这俩的区别前者可以自定义域名，而码云不能，且还得手动更新

把刚刚打包后的 music 文件夹下的内容 push 到 GitHub 上

接着点击打开 Vercel 官网

右上角点击 Sign Up，使用 GitHub 注册

点击 Authorize Vercel（授权给 Vercel）

接着输入手机号码进行验证（有人说不需要）唔~我也不清楚，反正我注册的时候要输入…

验证成功之后我们点击 Continue

输入你 GitHub 仓库地址（也就是你刚刚打包 push 到 GitHub 的仓库地址）

然后就继续 Continue，最后 Deploy

最后没了，已经部署成功啦！

部署成功后 Vercel 会默认自带个二级域名，点击即可访问，我们也可以自定义 Vercel 提供的二级域名

点击 Settings –> Domains

格式为：xxx.vercel.app，xxx 表示你自定义的，点击右侧 Add，如果没有人使用的话，会自动验证成功。

如果你想绑定自己域名的话，那你就直接输入自己的域名，点击 Add 即可，下方会提示 Invalid Config...

然后在域名购买方控制台进行域名解析。解析完成后即可通过自己的域名访问。

大功告成！！

注册登录不阐述了，创建与 Gitee 用户名相同的仓库，不然会出现 404 问题，除非你改源码。

把刚刚打包后的 music 文件夹下的内容 push 到 Gitee 上

然后点击服务 –> Gitee Pages

如有问题，请在下方评论！