vercel是什么神仙网站

  • vercel是我用过的最好用的网站托管服务。

  • vercel类似于github page，但远比github page强大，速度也快得多得多，而且将Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。

  • vercel还支持部署serverless接口。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的，简直是白嫖党的福利啊！！！！！

  • vercel还支持自动配置https，不用自己去FreeSSL申请证书，更是省去了一大堆证书的配置，简直是懒人的福利啊啊啊有木有！

  • vercel目前的部署模板有31种之多。我目前使用的只有Hexo和Vue

一、创建VUE脚手架

开发工具使用的：idea 2021.2

image-20211205225042123

项目结构

  • 本地项目启动

image-20211205231051532

二、Vercel 部署

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

1、登录注册

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

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

image-20211205231858635

2、项目依赖

下载npm依赖

1
npm i -g vercel

image-20211205232120203

根目录创建vercel.json文件

image-20211205232343660

vercel.json

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

创建api文件夹

image-20211205233142343

  • 创建index.js 文件
1
2
3
4
5
const express = require('express') #引入express
const app =express()
app.use(express.static("../dist")) #托管到dist目录(打包)

module.exports = app #导出app实例

3、项目环境

1
2
# 控制台输入
vercel login
  • 选择GitHub 登录，回车。接着就会自动打开浏览器登录

image-20211205233546709

image-20211205233715939

控制台日志: 登录成功

image-20211205233812971

4、项目推送

1
vercel

image-20211205234008349

  • 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 项目，问我们是不是这些配置，覆盖，如果不是就修改，是的话默认回车

    image-20211205234642251

部署成功

image-20211205235100630

image-20211205235157131

5、补充

Vercel 还是一个持续集成的

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

image-20211205235529420