【Vercel】Vercel静态部署踩坑

背景

在现代的软件开发中,自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台,提供了与GitHub的无缝集成,使得开发者能够在每次提交代码后自动触发部署流程。然而,自动化部署过程中可能会遇到一些挑战,比如提交Git的邮箱与GitHub绑定的邮箱不一致导致自动部署失败。本文将探讨这一问题及其解决方案,并介绍如何通过自定义域名来提升部署项目的专业度。

Github自动部署问题

vercel默认支持在Github的commit操作后进行自动部署

自动部署失败

问题:如果提交git的邮箱和GitHub绑定邮箱不一致呢?

结果:失败

在这里插入图片描述

失败原因

如何解决

设置本地git提交邮箱

  1. 原本未设置全局邮箱,所以报错
  2. 设置本地Git提交邮箱: 在终端或命令提示符中,使用以下命令来设置你的提交者姓名和邮箱。
git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"
//替换Your Name为你的真实姓名,your_email@example.com为你的GitHub绑定邮箱。 ![](https://img-blog.csdnimg.cn/img_convert/ac659362f91540f9cd31391ab5162e66.png)
  1. 在设置后进行提交,会检测到commit并自动部署

在这里插入图片描述

如下图所示,提示部署成功了!

如何访问

域名

可以自定义域名,也可以使用vercel的子域名

自定义域名需要自己购买,使用vercel的子域名等于是挂载在vercel网站下

![](https://img-blog.csdnimg.cn/img_convert/68e19b9549ded8459207cb78f6c0d147.png在这里插入图片描述

在这里插入图片描述

最后成功

完成上面的内容后,就可以直接点进配置域名进入部署项目的主页了
在这里插入图片描述

【Vercel】如何将你的静态网站发布?(无需服务器完成自动部署)

在这里插入图片描述

命令报错

报错详情

13:18:21.159
13:18:21.160npm error This is an error with npm itself. Please report this error at:
13:18:21.160npm error
13:18:221.16 npm error A complete l
<https://github.com/npm/cl/ssues>
logofthhis run can bbeffound in: /vercel.1/.npm/_1ogs/2024-09-29T05_17_00_500Z-debug-0.1og
13:18:21.285
13:18:21.40213:18:21.287sh: line 1: vite: command not found
Error: Command "vite build" exited with 127

如何解决

先在本地连接测试

  1. 安装vercel依赖
    npm install -g vercel
  2. 登录vercel
    vercel login
    登录会选择代码仓库,这里用的是github,直接跳转浏览器登录
  3. 登录后本地部署连接

    这里的报错和上面相同

解决

考虑是package-lock.json
锁死了版本,导致依赖安装失败
删除package-lock在本地安装,就成功了

然后在vercel平台安装生产环境

【Vercel】如何将你的静态网站发布?(无需服务器完成自动部署)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/453586.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动化工具:Ansible

目录 一、运维自动化工具有哪些 二、Ansible 概述 1、Ansible 概念 2、Ansible 特点 3、Ansible 工作流程 三、安装部署Ansible 1、环境部署 2、管理节点安装 Ansible 3、查看Ansible相关文件 4、配置主机清单 5、免密管理 ssh-keygen 5.1、测试连通性 5.2、简洁输…

IPC通信-消息队列

使用消息队列实现两个进程的相互通信 #include<myhead.h>//定义结构体存储信息种类和信息正文 typedef struct {long mtype; //信息类型char mtext[128]; //信息正文 }msgbuf;//宏定义信息正文的大小 #define MESIZE sizeof(msgbuf)-sizeof(long)typedef struct sockad…

vscode:创建fastapi项目

1.选择py解释器 或者 uvicorn main:app --reload

java游戏网站源码

题目&#xff1a;java游戏网站源码 编号B22A390 主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Mysql|大数据|SSM|SpringBoot|Vue|Jsp|MYSQL等)、学习资料、JAVA源码、技术咨询 文末联系获取 感兴趣可以先收藏起来&#xff0c;以防走丢&#xff0c;有任何选题、文档编…

雷池WAF自动化实现安全运营实操案例终极篇

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Unity DOTS中的Archetype与Chunk

Unity DOTS中的Archetype与Chunk 在Unity中&#xff0c;archetype&#xff08;原型&#xff09;用来表示一个world里具有相同component类型组合的entity。也就是说&#xff0c;相同component类型的entity在Unity内部会存储到一起&#xff0c;共享同一个archetype。 使用这样的设…

React是如何工作的?

从编写组件到最后屏幕生成界面&#xff0c;如上图所示&#xff0c;我们现在需要知道的就是后面几步是如何运行的。 概述 这张图解释了 React 渲染过程的几个阶段&#xff1a; 渲染触发&#xff1a;通过更新某处的状态来触发渲染。渲染阶段&#xff1a;React 调用组件函数&…

智能优化算法-生物地理学算法(BBO)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1.内容介绍 生物地理学优化算法 (Biogeography-Based Optimization, BBO) 是一种基于生物地理学原理的元启发式优化算法&#xff0c;由Dan Simon于2008年提出。BBO通过模拟物种在不同栖息地之间的迁移过程来搜索最优解&…

Dongle Sentinal在Jenkins下访问不了的问题

背景&#xff1a; 工作站部署的jenkins的脚本无法正常打包&#xff0c;定位后发现是本地获取不了license&#xff0c;但是使用usb over network的远程license都能获取并正常打包 分析&#xff1a; 获取不了license的原因是本地无法识别dongle。根据提供信息&#xff0c;之前…

卡特兰数解释相关的样例以及补充例题

目录 拓展的场景分析 1.圆上连接线段 2.二叉树问题 3.多边形划分三角形问题 补充的例题 P1976 鸡蛋饼 P1722 矩阵 II 通过取模处理判断选择用哪个式子​编辑 P2532 [AHOI2012] 树屋阶梯 P3978 [TJOI2015] 概率论 拓展的场景分析 1.圆上连接线段 一个圆上有2*n个点&am…

nginx中的HTTP 负载均衡

HTTP 负载均衡&#xff1a;如何实现多台服务器的高效分发 为了让流量均匀分配到两台或多台 HTTP 服务器上&#xff0c;我们可以通过 NGINX 的 upstream 代码块实现负载均衡。 方法 在 NGINX 的 HTTP 模块内使用 upstream 代码块对 HTTP 服务器实施负载均衡&#xff1a; upstr…

基于微博评论的自然语言处理情感分析

目录 一、项目概述 二、需要解决的问题 三、数据预处理 1、词汇表构建&#xff08;vocab_creat.py&#xff09; 2、数据集加载&#xff08;load_dataset.py&#xff09; 四、模型构建&#xff08;TextRNN.py&#xff09; 1、嵌入层&#xff08;Embedding Layer&#xff…

Unity通过高德开放平台获取天气信息

一、注册高德开放平台账号&#xff0c;获取天气接口Key 1、构建自己的应用 网址&#xff1a;https://lbs.amap.com/api/webservice/guide/api/weatherinfo 最终调用api的地址形式&#xff1a; https://restapi.amap.com/v3/weather/weatherInfo?city110101&key<用户…

ionic Capacitor 生成 Android 应用

官方文档 https://ionic.nodejs.cn/developing/android/ https://capacitorjs.com/docs/getting-started 1、创建新的 Capacitor 应用程序 空目录下面 npm init capacitor/app2、install Capacitor npm install npm start在这里插入图片描述 3、生成dist目录 npm run buil…

华为eNSP:MAC地址漂移防止与检测

一、什么是MAC地址漂移&#xff1f; MAC地址漂移是指在计算机网络中&#xff0c;MAC&#xff08;Media Access Control&#xff09;地址被动态更改的现象。每个网络接口设备都有一个唯一的MAC地址&#xff0c;用来标识该设备在网络中的身份。然而&#xff0c;有些恶意软件或网…

15.JVM垃圾收集算法

一、垃圾收集算法 1.分代收集理论 分代收集理论是JAVA虚拟机进行垃圾回收的一种思想&#xff0c;根据对象存活周期的不同将内存分成不同的几个区域&#xff1b;一般将JAVA堆内存分为新生代和老年代&#xff1b;根据每个分代特点选择不同的垃圾收集器&#xff1b; 在新生代中&am…

深入理解 TypeScript 中的 as 关键字

在TypeScript中&#xff0c;as 关键字是一种类型断言&#xff08;Type Assertion&#xff09;的语法&#xff0c;用于告诉编译器如何理解某个变量的类型。这在开发过程中非常有用&#xff0c;尤其是当你知道比编译器更多的类型信息时 基本用法 类型断言允许你在编译时更改变量的…

InnoDB引擎(架构,事务原理,MVCC详细解读)

目录 架构分析 逻辑存储结构​ 内存结构​ Buffer Pool​ ChaneBuffer 自适应哈希​ LogBuffer​ 磁盘结构​ 后台线程​ 事务原理​ redolog日志 undolog日志​ MVCC​ 三个隐藏字段​ undolog版本链 readview​ RC(读已提交原理分析)​ RR(可重复读原理分析…

动态规划之斐波那契数列

文章目录 第 N 个泰波那契数三步问题使用最小花费爬楼梯解码方法 动态规划的基本思想是利用之前已经计算过的结果&#xff0c;通过递推关系式来计算当前问题的解。 整体思路 状态表示状态转移方程初始化填表顺序返回值 第 N 个泰波那契数 题目&#xff1a; 第 N 个泰波那契数 思…

云网络验证系统云验证+卡密生成+多应用多用户管理

云网络验证系统云验证&#xff0c;多样化应用管理方式&#xff0c;多种项目任你开发&#xff0c;分布式应用开关&#xff0c;让您的应用开发更简单&#xff0c;本系统借鉴于易如意API写法及思路&#xff0c;完美实现多用户多应用管理。 源码特色 1&#xff0c;对接&#xff1…