前言

最近空闲时间再做一个引导站点,使用的是 Vue3 + Vite,完成之后首先想到的就是用 Vercel 托管,网上查询了下,有 vercel-cli 脚手架可以在本地用命令部署,特此记录一下!

前置教程

在看此文章之前,确保你之前有对 Vercel 有一定的了解并有项目托管的经验,可以参考此文章:

教程步骤

  1. 使用 vue-cli 搭建脚手架,并能正常运行项目

    由于考虑到看这篇文章的应该是做前端开发的,此教程就略过了,不懂的可以看 vue-cli

  2. 在项目根目录,全局安装 vercel 依赖

    1
    npm i -g vercel
  3. 在根目录创建 vercel.json 文件

    1
    2
    3
    {
    "rewrites": [{"source": "/api/(.*)", "destination": "/api"}]
    }
  4. 在根目录创建文件 api\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实例
  5. 打开控制台,输入命令:

    1
    vercel login
  • 选择GitHub 登录,回车。接着就会自动打开浏览器登录
    1652866177818.jpg
    1652866191897.jpg

  • 看控制台日志,显示登录成功
    1652866207136.jpg

  1. 项目推送
    在控制台输入命令 vercel:
    1
    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 项目,问我们是不是这些配置,如果不是就修改,是的话默认回车

    这里如果不需要更改什么的话,我们都直接默认回车就行

  1. 部署成功
    1652866458485.jpg

    1. 第一次执行 vercel 会把我们项目托管到平台上,并给我们一个生产域名 Production,如果我们需要自定义域名,请参考 前置教程
    2. 当我们修改代码后,再执行 vercel ,这时候并没有把代码更新到 vercel 平台,控制台会给我们一个预览地址 Preview,如果我们确认没问题,需执行命令 vercel --prod 把代码推送到 vercel 平台更新
      1
      vercel --prod
      1652867108647.jpg
    3. vercel 只适合部署静态页面,如果页面有动态数据请求的,建议还是部署到自己的服务器