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

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

前置教程

在看此文章之前，确保你之前有对 Vercel 有一定的了解并有项目托管的经验，可以参考此文章： 使用 Vercel 来加速 Hexo 博客

教程步骤

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. 部署成功

8. 第一次执行 vercel 会把我们项目托管到平台上，并给我们一个生产域名 Production，如果我们需要自定义域名，请参考 前置教程

9. 当我们修改代码后，再执行 vercel ，这时候并没有把代码更新到 vercel 平台，控制台会给我们一个预览地址 Preview，如果我们确认没问题，需执行命令 vercel --prod 把代码推送到 vercel 平台更新

   vercel --prod
   

   

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

总结

关注我的公众号，不定时分享软件开发技术文章和生活工作经验：