matrix | 前端技术博客

August 20 2018 —— Netlify

使用 Netlify 快速部署你的 Vue 应用!


UlysoUlyso
  1. 什么是 Netlify ?

    Netlify 是一个现代网站自动化部署系统, 可以帮助你简单、快速部署你的 Vue 应用!下面我将向你展示如何使用它。

一. 准备工作

  • 一个 Vue 应用 准备好你的 Vue 应用(如果还没有,刚好,现在 Vue-Cli 3.0 已经发布,使用它开始一个新的项目吧!或者使用我准备的这个
  • 一个 Git 项目 为了完成部署,你需要使用 Git 管理你的项目,这里我们使用 Github (实际上,你可以使用 Gitlab 或者 Bitbucket)

准备好这些之后,首先创建或者登录你的 Netlify 账号(免费!)

二. 使用 Netlify 开始创建一个新的网站

所有的操作都直接在 Netlify 上面就可以完成

进入 Netlify 后 点击 New site from Git 按钮

只需三步,完成操作

第一步,选择你的 Git 项目 从上图中的三个选项中选择一个: GitHub, GitLab, Bitbucket.

第二步,选择你想要部署的项目 选定项目之后,告诉 Netlify 怎么构建我们的 Vue 应用

参考上图,这也是最重要的一步,选择你想要部署的 Git 的分支 master, 输入构建的命令yarn run build (可以缩写为yarn build, 你也可以选择 npm),最后,选择部署的目录dist(具体名称根据你的项目设置,如果没有更改过,就是dist)。

最后,点击 Deploy 按钮,等待片刻,你的应用已经部署成功。

之后,每次你在选定的分支推送新的更改时,Netlify 会自动更新项目,不需要你再做任何操作。

你的网站部署成功之后,Netlify 会自动为你分配一个地址,你也可以自己选择你想要的地址,或者绑定你自己的域名。


以上,就是关于 Netlify 的介绍,感谢观看!