前言
最近空闲时间再做一个引导站点,使用的是 Vue3 + Vite,完成之后首先想到的就是用 Vercel 托管,网上查询了下,有 vercel-cli 脚手架可以在本地用命令部署,特此记录一下!
前置教程
在看此文章之前,确保你之前有对 Vercel 有一定的了解并有项目托管的经验,可以参考此文章:
教程步骤
使用 vue-cli 搭建脚手架,并能正常运行项目
由于考虑到看这篇文章的应该是做前端开发的,此教程就略过了,不懂的可以看 vue-cli
在项目根目录,全局安装 vercel 依赖
1
npm i -g vercel
在根目录创建 vercel.json 文件
1
2
3{
"rewrites": [{"source": "/api/(.*)", "destination": "/api"}]
}在根目录创建文件 api\index.js
1
2
3
4
5const express = require('express') #引入express
const app =express()
app.use(express.static("../dist")) #托管到dist目录(打包)
module.exports = app #导出app实例打开控制台,输入命令:
1
vercel login
选择GitHub 登录,回车。接着就会自动打开浏览器登录
看控制台日志,显示登录成功
- 项目推送
在控制台输入命令 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 项目,问我们是不是这些配置,如果不是就修改,是的话默认回车
这里如果不需要更改什么的话,我们都直接默认回车就行
部署成功
- 第一次执行 vercel 会把我们项目托管到平台上,并给我们一个生产域名 Production,如果我们需要自定义域名,请参考 前置教程
- 当我们修改代码后,再执行 vercel ,这时候并没有把代码更新到 vercel 平台,控制台会给我们一个预览地址 Preview,如果我们确认没问题,需执行命令 vercel –prod 把代码推送到 vercel 平台更新
1
vercel --prod
- vercel 只适合部署静态页面,如果页面有动态数据请求的,建议还是部署到自己的服务器
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Cyan!
评论
您无需删除空行,直接评论以获取最佳展示效果