vue怎么部署到服务器（使用 Vercel 快速部署前端项目）
Vercel：一键部署前端项目 。
前端项目部署的问题
先来说下前端项目的部署 ，一般来说有以下几个步骤：
项目打包 上传到服务器 域名解析 SSL 证书申请 Nginx 配置 CDN 加速如果是公司的项目 ，打包之后的步骤一般有专门的运维人员负责 ，对前端开发者来说并没有什么负担 。
但如果是个人的项目 ，那不仅要有服务器 ，还要会申请 SSL 、配置 Nginx 和 CDN 加速 ，学习成本很高 。而且即使配置好了 ，后面每次修改代码之后都要重新打包并上传到服务器 ，很麻烦 。
那么 ，有没有简单一点的办法 ，能快速部署前端项目 ，并且能简化一系列的配置问题？
Vercel
这就不得不提到这次的主角：Vercel 。
Vercel 支持 30 多种前端框架 ，开发者可以快速部署自己的项目 ，同时支持自定义域名 、代码提交触发部署 。把复杂部署和配置等工作交给 Vercel 处理 ，开发者就能把精力放在代码和功能开发上 。
Vercel 的使用还是很简单的 ，主要分为下面几个步骤：
注册/登录 部署项目 自定义域名做好下面的准备工作 ，教程就正式开始了 。
GitHub/GitLab/Bitbucket 账号 前端项目（上传到上面的 Git 仓库） 域名注册/登录
访问「Vercel Sign Up」进行注册 。
这里我以 GitHub 为例 ，点击上图中的「Continue to Dashboard」按钮 ，在弹出窗口里登录 GitHub 账号并进行授权 ，授权后可能需要输入手机号并进行短信验证码验证 ，验证之后即注册成功 ，如下图所示 。
部署项目
我的 GitHub 账号准备了一个项目 ，是我从「md」fork 过来的 ，md 是一款高度简洁的微信 Markdown 编辑器 ，我的公众号文章都是用它来排版 ，你也可以 fork 此项目在 Vercel 上进行部署 。
这里还是以 GitHub 为例 ，点击上图中的「Continue with GitHub」 ，会弹出安装 Vercel 的授权窗口 ，可以选择所有仓库或者指定的仓库 。
我这里选择了所有仓库 ，点击「Install」按钮后会自动关闭窗口 ，页面就会显示 GitHub 的项目列表 。
点击项目后的「Import」按钮 ，跳转到项目信息的配置界面 。
这里可以对项目的信息进行编辑：
项目的名称（PROJECT NAME） 框架预设（FRAMEWORK PRESET） 根目录（ROOT DIRECTORY） 打包和输出设置（Build and Output Settings） 环境变量（Environment Variables）需要注意的是 ，md 项目的文档中有提到 ，如果要把项目部署在根目录 ，需要执行 npm run build\:h5-netlify ，所以要打开 BUILD COMMAND 的 OVERRIDE 按钮 ，把命令粘贴在前面的输入框即可覆盖默认的打包命令 。
配置好之后点击「Deploy」即可开始部署项目 ，等两分钟左右就可以看到部署成功的提示 ，然后会自动跳转到下图所示的页面 。
点击「Continue to Dashboard」按钮 ，跳转到下图页面 。本来点击「Visit」或者 DOMAINS 下的两个域名都可以访问部署好的项目页面 ，但是目前 vercel.app 域名在国内访问不了 ，所以就需要进入到下一步配置自定义域名 。
自定义域名
依次点击 Settings–>Domains ，在输入框中输入你的域名并点击 Add 按钮 。
这里我以我自己的域名为例 ，输入 markdown.juemuren4449.com 。不用管页面给出的提示 ，直接去域名解析的地方配置 NS 解析 ，具体配置参考下图 。
该配置就是将 markdown.juemuren4449.com 域名通过 NS 方式解析到 ns1.vercel-dns.com 。再添加一条解析 ，其他信息与上图一致 ，记录值改为 ns2.vercel-dns.com 。
配置后返回 Vercel ，页面显示域名已配置好 ，正在生成 SSL 证书（Generating SSL Certificate） 。
等 SSL 证书生成之后就可以使用自定义域名「https://markdown.juemuren4449.com」进行访问了（说明：此项目用 Safari 访问有问题 ，使用 Chrome 或者 Edge 访问即可） 。
提交代码触发部署
通过上面的配置和部署应可以看出 Vercel 的方便快捷了 ，而接下来就是 Vercel 的另一个大招 ，提交代码之后自动触发部署 。
在本地编辑刚才的项目代码 ，把右上角的「发布」按钮删除 ，然后提交代码 。稍等几秒钟 ，Vercel 的 Deployments 页面就开始自动部署了 ，部署完之后还会给你的邮箱发送邮件通知 。
再次访问 https://markdown.juemuren4449.com ，右上角已经没有了发布按钮
如果是自己做一些小项目 ，再也不用每次修改代码之后还要打包上传到服务器了 ，只需要把代码提交到仓库 ，Vercel 会自动触发部署 ，部署完成之后再通知你 ，这体验真的是无比丝滑 。
总结
从前面的的部署步骤看 ，使用 Vercel 部署项目有以下优点：
提供免费的静态服务器 快速导入项目并一键部署 自动生成 SSL 证书 提交代码自动触发部署而且 ，Vercel 提供的免费的套餐足够个人使用（不同套餐包含内容可以访问「Plan Compare」查看） ，配合自定义域名在国内的访问速度也不错 。
只是简单的点击几个按钮 ，就可以把项目导入并部署 ，再配合自定义域名 ，即可实现项目的访问 。整个过程对于常规的项目部署来说要简单太多 ，极大的降低了开发者部署项目的难度 ，使开发者能把更多的精力放在代码和功能的开发上 。
不过 ，Vercel 毕竟是国外的服务 ，访问存在不确定性 ，所以拿来部署一下个人的项目还可以 ，公司的项目就不要考虑了 。
与 Vercel 同类型的服务还有「Netlify」 ，感兴趣的可以自行了解 。
欢迎访问的个人博客：掘墓人的小铲子
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！