【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】如何将你的静态网站发布?(无需服务器完成自动部署)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

15分钟学Go 第6天:变量与常量

第6天&#xff1a;变量与常量 在Go语言中&#xff0c;变量和常量是编程的基础概念。理解如何定义和使用它们不仅能帮助我们管理数据&#xff0c;还能增强代码的可读性和可维护性。在本章中&#xff0c;我们将详细探讨Go语言中的变量和常量&#xff0c;涵盖它们的定义、使用、作…

【小白学机器学习19】统计基础:什么是定量分析,量化的4个层级,因果关系分类等

目录 1 定性分析和定量分析 1.1 两种分析方式 1.2 定性分析 1.3 定量分析 1.3.1 定义 1.3.2 名字 1.4 特点和差异 1.5 两者的关系 1.6 测量的评价&#xff1a;切实&#xff0c;可靠 1.7 关于统计分析 2 定量分析的三段式逻辑&#xff1a;个体 → 样本 → 总体 2.1 …

ArkUI自定义TabBar组件

在ArkUI中的Tabs&#xff0c;通过页签进行内容视图切换的容器组件&#xff0c;每个页签对应一个内容视图。其中内容是图TabContent作为Tabs的自组件&#xff0c;通过给TabContent设置tabBar属性来自定义导航栏样式。现在我们就根据UI设计的效果图来实现下图效果&#xff1a; 根…

react18中如何实现同步的setState来实现所见即所得的效果

在react项目中&#xff0c;实现添加列表项&#xff0c;最后一项自动显示在可视区域范围&#xff01;&#xff01; 实现效果 代码实现 import { useState, useRef } from "react"; import { flushSync } from "react-dom"; function FlushSyncRef() {con…

关于Pytest fixture,我们了解多少?

关于Pytest fixtures&#xff0c;根据官方文档介绍&#xff1a;fixture用于提供一个固定的基线&#xff0c;使 Cases 可以在此基础上可靠地、重复地执行。 对比 PyUnit 经典的setup/teardown形式&#xff0c;它在以下方面有了明显的改进&#xff1a; fixture拥有一个明确的名称…

Linux 之 fdisk 【磁盘分区管理】

删除分区 1.查看磁盘信息 lsblk 2.删除分区sdb硬盘下的所有分区 # 1 进入d的磁盘分区 fdisk /dev/sdb # 2 输入p查看磁盘的分区信息 # 3 输入d进入删除磁盘分区命令 # 4 选择要删除的分区号 重复3&#xff0c;4 全部删除 # 5 w 保存退出并生效操作信息 &#xff08;输入q…

postman使用——在公司的项目落地回顾总结

背景 使用postman做接口自动化以及有差不多一年了&#xff0c;迭代更新了也差不多一年了&#xff0c;本篇文章主要介绍与总结&#xff1a; 为什么使用postman做自动化如何使用postman做接口自动化实际落地的方案实施postman优势与限制 为什么使用postman做接口自动化 有以下…

ORACLE在企业中的运用及岗位介绍

微思 | Oracle 19C OCP 认证培训 厦门面授班 | 全国直播班 同步上课 课程介绍&#xff1a;Oracle OCP 19C课程介绍 培训讲师—吴振兴 往期考试战报&#xff1a;【ORACLE战报】 OCP 认证 OCP &#xff1a;Oracle 数据库认证专家&#xff08; Oracle Certified Professional…

【Linux系列】在 Linux 中使用 `watch` 命令监控 Docker 容器状态

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【Linux】僵尸进程和孤儿进程

一、僵尸进程 何为僵尸进程&#xff1f; 在 Unix/Linux 系统中&#xff0c;正常情况下&#xff0c;子进程是通过父进程创建的&#xff0c;且两者的运行是相互独立的&#xff0c;父进程永远无法预测子进程到底什么时候结束。当一个进程调用 exit 命令结束自己的生命时&#xff…

FineReport 全局参数

全局参数与模板参数的区别如下&#xff1a; 1&#xff09;全局参数&#xff1a;当前工程下的所有模板都可以使用。 2&#xff09;模板参数&#xff1a;只有当前模板才可以使用 注&#xff1a;全局参数 area 并不是在当前模板下创建的&#xff0c;但是可以在模板中直接调用 全…

C++ 十进制数转换成7进制字符串

题目要求&#xff1a; 给定一个整数 num&#xff0c;将其转化为 7 进制&#xff0c;并以字符串形式输出。 C源码&#xff1a; #include "stdafx.h" #include <String> using namespace std;string convertToBase7(int num) {int tempNum num;char t;string…

WGCLOUD可以监控GPU吗

可以的 采集主机GPU信息功能&#xff0c;是WGCLOUD v3.5.5新增的一个功能模块&#xff0c;所以需要升级到v3.5.5或者以上版本 我们在主机管理的列表页面&#xff0c;点击【查看更多】->【扩展监控】按钮&#xff0c;就可以看到该主机的GPU信息 agent每间隔10分钟就会采集一…

DES对称加密算法

DES&#xff08;Data Encryption Standard&#xff0c;数据加密标准&#xff09;是一种对称加密算法。 算法概述 加密类型&#xff1a;对称加密&#xff08;同一密钥用于加密和解密&#xff09;。密钥长度&#xff1a;64位&#xff08;8字节&#xff09;&#xff0c;其中有效…

基于SSM网络在线考试系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;在线考试管理&#xff0c;试题管理&#xff0c;考试管理&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;在线考试&#xff0c;公告信…

最新物流行业CRM系统应用数字化解决方案

因势利导 ——全球化物流的挑战与机遇 在全球经济一体化与互联网技术快速发展的双重驱动下,物流行业正经历着前所未有的变革时期。这一变革不仅影响 着行业的发展模式,还对运营效率和客户体验提出了新的要求。 随着市场需求的不断演变,物流行业已呈现出多元化和专业 化并行的发…

OpenCV双目视觉三角测量代码实现C++

在双目视觉系统中&#xff0c;三角测量是一种基于几何原理的三维重建技术&#xff0c;通过分析同一场景在两个不同视角下的二维图像来确定物体的三维坐标。这种方法的核心在于利用摄像机的内参和相对位姿&#xff08;由旋转矩阵和平移向量描述&#xff09;&#xff0c;将图像中…

数据科学家必须掌握的12个Python功能

Python 已经成为数据科学家的必选语言&#xff0c;从数据处理到机器学习&#xff0c;它几乎无所不能。本文将探讨一些Python特性&#xff0c;这些特性不仅能帮助你编写更高效、更易读、更易维护的代码&#xff0c;还特别适合数据科学的需求&#xff0c;使你的代码简洁且优雅。 …

mysql8 使用idb文件实现数据备份

文章目录 1.备份脚本示例2.设置 Cron 任务3. 数据恢复 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 需求&#xff0c;在离线情况下实…

【Linux】————磁盘与文件系统

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;Linux 创作时间 &#xff1a;2024年10月17日 一、磁盘的物理结构 磁盘的物理结构如图所示&#xff1a; 其中具体的物理存储结构如下&#xff1a; 磁盘中存储的基本单位为扇区&#xff0c;一个扇区的大小一般为512字…