VerCel 免费托管前端项目

vercel是什么神仙网站

• vercel是我用过的最好用的网站托管服务。
• vercel类似于github page，但远比github page强大，速度也快得多得多，而且将Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。
• vercel还支持部署serverless接口。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的，简直是白嫖党的福利啊！！！！！
• vercel还支持自动配置https，不用自己去FreeSSL申请证书，更是省去了一大堆证书的配置，简直是懒人的福利啊啊啊有木有！
• vercel目前的部署模板有31种之多。我目前使用的只有Hexo和Vue

一、创建VUE脚手架

开发工具使用的：idea 2021.2

• 本地项目启动

二、Vercel 部署

​ 通常我们部署一个简单项目只是想要演示，要想外网访问，一般考虑的是购买阿里云服务器或者腾讯云服务器，在打包上去部署。购买服务器也是一比不少的开支，但是购买服务器也只是简单的部署一下自己的网页演示，导致买的服务器作用也不大。这个时候就可以考虑使用 vercel 部署，不要我们dist打包，还能免费的部署,省去一些麻烦。

1、登录注册

​ 地址：https://vercel.com/

注意: 注册的时候我们一般使用的GitHub注册，切记不要使用绑定QQ邮箱号的Github账号去注册，一般都会注册失败。所用在注册之前去修改一下绑定的邮箱，123邮箱或者谷歌邮箱（建议）等等。

2、项目依赖

下载npm依赖

npm i -g vercel

根目录创建vercel.json文件

vercel.json

{
  "rewrites": [{"source":  "/api/(.*)", "destination": "/api"}]
}

创建api文件夹

• 创建index.js 文件

const express = require('express') #引入express
const app =express()
app.use(express.static("../dist")) #托管到dist目录(打包)

module.exports = app #导出app实例

3、项目环境

# 控制台输入
vercel login

• 选择GitHub 登录，回车。接着就会自动打开浏览器登录

控制台日志: 登录成功

4、项目推送

vercel

• Set up and deploy “~\Desktop\vueProject\vue-demo”? [Y/n] Y
• Which scope do you want to deploy to? 问你是不是要部署到这个账号上面。回车即可
• Link to existing project? 是不要连接现在的项目，大写的是N，直接回车即可
• What’s your project’s name? 项目名称，直接默认即可（看自己个人情况），回车
• In which directory is your code located? 是不是要项目的所有文件，默认回车
• Want to override the settings? 识别出了我的项目是vue 项目，问我们是不是这些配置，覆盖，如果不是就修改，是的话默认回车

部署成功

• 测试：https://vue-demo-orpin.vercel.app

5、补充

Vercel 还是一个持续集成的

• 测试，修改Vue项目里面的内容

• 控制台输入：vercel
  • 注意，修改后发布，访问地址发生了改变，原本为：https://vue-demo-orpin.vercel.app。重新部署完成之后变成了：https://vue-demo-oycodesite.vercel.app
  • 后面一次修改部署，访问地址就不会变化。例如：我这个测试项目修改内容不是后访问地址是https://vue-demo-oycodesite.vercel.app ，同理，那么我后面修改之后都是这个地址。