Vue / Reactc 项目完成之后,传统的做法是 npm run build 把项目打包,再把整个项目上传到服务器空间,如果是一次还好,如果每次发布新版本的话,每次都要 build 打包,服务器删掉原来的文件,重新上传,非常耗费时间
Netlify 是一个前端自动化部署服务,只需要将项目推送到 github ,每次有新的版本推送,都会被 Netlify 检测到,并以非常快的速度在服务器内 build 新的版本并发布,我的项目比较小,推送到 github 的新版本,只需要30秒以内新的内容就可以发布完成
登录账号
打开官网 www.netlify.com/ 点击右上角 Log in 登录,
点击 GitHub 登录,虽然国内能打开网站,但是登录页面确无法打开,只好~你懂的
部署项目
点击右侧按钮 New site from Git
下方点击 GitHub 授权Netfily 从 GitHub 获取项目
GitHub会弹出窗口,点击下方 Install 授权,跳转输入 GitHub 密码完成授权
选择要部署的项目
下方选择要发布的分支,build 指令,发布项目的目录,Vue 项目的发布文件夹名为 dist,就直接填写 dist 就可以了,确认填写无误后点击下方 Deploy site
自动打包
点击这里查看打包进度
进入页面查看打包进度,第一次运行会下载依赖,这里需要等待些时间,
项目发布完毕
自定义页面地址
返回上一个面,左上角的地址,就是项目的临时网址了,这里点击下方的 2 来绑定自己的域名
或者点击 Site settings → Domain management 右侧 Options 来编辑修改网址
可以改成自己想要的前缀名,只要没有被占用成功修改,就可以通过这个地址打开网站了
之后每次 GitHub 推送新版本到 master,都会被 Netlify 检测到并自动发布项目了
只有登录时会出现问题,实际测试收藏登录后的网址打开账号,还是国内打开发布的页面,速度都挺快的