使用 Vercel 托管 Vue3 前端静态页面

前言

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

前置教程

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

站内教程索引：

使用 Vercel 来加速 Hexo 博客

/post/812734f8.html/

教程步骤

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

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

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

   npm i -g vercel

3. 在根目录创建 vercel.json 文件

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

4. 在根目录创建文件 api\index.js

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

5. 打开控制台，输入命令：

   vercel login

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

• 看控制台日志，显示登录成功
  

6. 项目推送
   在控制台输入命令 vercel:

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

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

7. 部署成功
   

   1. 第一次执行 vercel 会把我们项目托管到平台上，并给我们一个生产域名 Production，如果我们需要自定义域名，请参考 前置教程
   2. 当我们修改代码后，再执行 vercel ，这时候并没有把代码更新到 vercel 平台，控制台会给我们一个预览地址 Preview，如果我们确认没问题，需执行命令 vercel --prod 把代码推送到 vercel 平台更新

      vercel --prod

      
   3. vercel 只适合部署静态页面，如果页面有动态数据请求的，建议还是部署到自己的服务器