🌈 使用Vercel部署自己第一个项目

1,442 阅读2分钟

Snipaste_2023-05-30_19-40-10.png 【官网地址】

vercel.com/

【简介】

不需要购买服务器,vercel部署项目会生成一个线上地址,可直接访问。

【优势】

初步了解后,发现了以下几个特点:

  1. 安装简单,上手快;
  2. 初始化,配置,打包,部署对新手友好;
  3. 无需额外购买云服务器也可以线上访问;
  4. 可关联GitHub账号,支持一键导入项目;
  5. vercel部署之前,能识别到主流的框架,使用框架默认的配置;
  6. 持续集成CI/CD;
  7. [...其他待发现]

【使用】

安装vercel

npm i -g vercel

登录vercel,授权使用GitHub账号登录,方便后续操作

Snipaste_2023-05-30_20-01-51.png

本地启动一个全新的vite项目,访问地址127.0.0.1

Snipaste_2023-05-30_19-37-45.png

第一次启动vercel部署,你会看到几个问题,下面依次说明一下含义(其实一路回车就好,都是默认选项) 【问题末尾的选项 y/n 大写加粗的部分代表vercel帮你给了默认项】 Snipaste_2023-05-30_20-04-46.png 1.确定要部署项目了吗? 2.使用当前GitHub账号来部署吗? 3.是否需要链接到其他项目? 4.给项目起一个名称吧 5.打包目录的根路径 6.识别到当前项目是vite,置灰部分是vite默认的脚步命令,是否要修改这些设置?

接着就能看到vercel会给出属于你的线上地址了。

Snipaste_2023-05-31_09-54-04.png

访问可以看到本地启动的项目,线上也没问题了

Snipaste_2023-05-31_09-55-45.png 项目第一次部署会有这几个问题,选择好以后,后面部署就很快了,一行命令搞定,还能持续集成CI/CD.

后续部署,并希望持续集成CI/CD,可使用

vercel --prod

例如,我将页面中心的文本vite+vue改一下,再次部署之后

Snipaste_2023-05-31_09-58-23.png

【后续补充】

如果不喜欢自动生成的地址,想改成自己的域名,也是支持的,进入到官网之后,找到设置,添加一下就好了

Snipaste_2023-05-31_10-01-26.png

当然,以上只是初步了解,更深入的玩法及优势,有了解的小伙伴欢迎评论区交流,~🤝✌🏻