不是吧?2025了你还不会在vercel上部署你的项目?

798 阅读3分钟

现在的前端开发,快速高效的项目部署已经成为必备的技能之一。Vercel作为当下最流行的前端部署平台之一,以其极简的配置、强大的功能和出色的性能赢得了广大开发者的青睐。我们将从零开始,在Vercel上部署一个前端项目。

为什么选择Vercel?

在部署之前,我们先来看看Vercel的几个核心优势:(来自度娘,哈哈)

  1. 极简部署:只需几次点击或一条命令即可完成部署
  2. 全球CDN:自动配置全球内容分发网络,加速你的网站访问
  3. 自动SSL:免费自动配置HTTPS证书
  4. Serverless函数:无缝支持后端API部署
  5. Git集成:与GitHub、GitLab等完美集成,支持自动部署
  6. 免费套餐:对个人项目和小型应用完全免费(重点--所以非常适用于个人兴趣项目)

方法一:通过网页界面部署(适合新手)

  1. 登录Vercel
    访问Vercel官网,使用你的GitHub、GitLab或Bitbucket账号登录。

  2. 导入项目
    点击"New Project"按钮,选择你要部署的代码仓库。

  3. 配置项目

    • Vercel会自动检测项目类型(如Next.js、React、Vue等)
    • 你可以修改项目名称、构建命令和输出目录等设置
  4. 部署
    点击"Deploy"按钮,Vercel将开始构建和部署你的项目。

  5. 访问网站
    部署完成后,Vercel会提供一个类似your-project-name.vercel.app的域名,你可以立即访问它。

通过Vercel CLI部署

(也是我们这次主要要说的,作为开发者我们主要也是用这种方式居多,除了使用自动cicd流程例外)

  1. 第一步就不再说一遍了,就是注册Vercel账号

  2. 下载Vercel包

    • 使用pnpm i vercel -g全局下载依赖包用于执行上传ci命令,下载成功后我们可以看到如下 image.png
  3. 执行发布命令

    • 首先执行 pnpm vercel命令

    • 如果之前没有登录过会提示选用登陆方式,选择其中注册的方式登陆即可 image.png

    • 如提示验证码 按需要填写 image.png

    • 成功后会显示下面选项, image.png

      第一个是提示是否在部署这个文件夹下内容

      第二个是如果有多个账号权限在这台电脑上登陆可以选择你需要上传的是哪个账号

      第三个是是否关联线上哪个项目

      第四个是建立上传后线上项目的名称

      第五个是在构建哪个文件默认我们进入的是项目文件所以使用 ./ 即可

      第六个是提示预览/打包/输出 这几个选项是否有要修改的命令,大多时候我们打的包在dist中,所以需要选择Output Directory 将public修改为dist

      image.png

    • 上面选项完成后,会自动进入自动化打包部署(出现下面提示标识为打包成功) image.png 进入提示的设置地址就能看到我们给我们部署分配的网页地址了 image.png