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

失败原因

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

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

如何访问
域名
可以自定义域名,也可以使用vercel的子域名
自定义域名需要自己购买,使用vercel的子域名等于是挂载在vercel网站下


最后成功
完成上面的内容后,就可以直接点进配置域名进入部署项目的主页了

【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

如何解决
先在本地连接测试
- 安装vercel依赖
npm install -g vercel - 登录vercel
vercel login
登录会选择代码仓库,这里用的是github,直接跳转浏览器登录 - 登录后本地部署连接

这里的报错和上面相同
解决
考虑是package-lock.json
锁死了版本,导致依赖安装失败
删除package-lock在本地安装,就成功了

然后在vercel平台安装生产环境
【Vercel】如何将你的静态网站发布?(无需服务器完成自动部署)
相关文章:
【Vercel】Vercel静态部署踩坑
背景 在现代的软件开发中,自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台,提供了与GitHub的无缝集成,使得开发者能够在每次提交代码后自动触发部署流程。然而,自动化部署过程中可能会遇到一些挑战࿰…...
【Spring】关于Spring中aware相关接口的作用
Aware 接口的回调方法是在 Bean 实例化之后调用的。具体来说,这些回调方法是在依赖注入完成后,但在 Bean 完全初始化之前调用的。这是 Spring 容器管理 Bean 生命周期的一部分 完成了属性赋值之后,Spring会执行一些回调,包括&…...
动态内存管理及RAII的简单应用
目录 一.程序启动所关联的内存分区 二.动态内存的申请和释放 三.将RAII思想融入代码 四.RAII思想的简单应用 一.程序启动所关联的内存分区 .dll文件是Dynamic Link Library(动态链接库)文件的缩写,它是一种共享库文件,包含…...
7、Vue2(一)
1.认识Vue 官网地址:https://v2.cn.vuejs.org/v2/guide/ Vue.js 是一套构建用户界面的渐进式框架。 Vue 2 是在2016年发布使用,2020是 vue3 才刚发布,时隔一年左右就已经将 vue3 作为了默认版本 尤雨溪,Vue.js和Vite的作者&…...
Chapter11
11.3 #include <stdio.h> #include <string.h> #define NUM_STUDENTS 40 #define NUM_SUBJECTS 3 // 学生结构体 typedef struct { int id; char name[50]; float scores[NUM_SUBJECTS]; float average; } Student; void inputData(Student studen…...
LLAMA2入门(一)-----预训练
Llama 2 是预训练和微调的LLM系列,Llama 2 和 Llama 2-Chat 模型的参数规模达到 70B。Llama 2-Chat 模型专门为对话场景进行了优化。 这是一个系列的文章,会分别从LLAMA2的预训练,微调,安全性等方面进行讲解。 1.数据来源 数据…...
使用poi-tl动态写入目录更新问题解决
在使用poi-tl动态写完word后,是无法更新目录的,使用poi-tl提供的插件也是不行的,而且很多使用poi手动写入的也是不行,最多就是让你在打开文件时提示你更新目录/更新域,用户体验很差,要点击好几次而且wps还不…...
OpenCV高级图形用户界面(9)更改指定窗口的位置函数moveWindow()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 将窗口移动到指定的位置。 cv::moveWindow() 函数用于更改指定窗口的位置。你可以使用这个函数来移动窗口到屏幕上的任何位置。 函数原型 void …...
华山论剑之Rust的Trait
华山论剑,群雄荟萃,各显神通。武林中人,各有所长,或剑法飘逸,或掌法刚猛,或轻功绝顶。这就好比Rust中的trait,它定义了一种武功套路,而不同的门派、不同的人,可以将这套武…...
AI 编译器学习笔记之七五 -- pdb 使用方法
1、进入调试状态有2种方法:Python工具PDB调试器的使用方法详解_python_脚本之家 (jb51.net) a) 在重新种设置断点正常执行:遇到代码中插入的pdb.set_trace()或者breakpoint()进入调试状态 b) 不修改命令行:直接使用 python3 -m pdb pdb_demo.…...
15分钟学Go 第8天:控制结构 - 循环
第8天:控制结构 - 循环 在Go语言中,循环是一种基本的控制结构,用于重复执行一段代码。今天我们将深入了解Go语言中的for循环,包括它的各种用法、语法结构、以及如何在实践中有效地应用循环。 1. for 循环的基本概念 for循环是G…...
后端接收参数的几种常用注解
目录 一、RequestParam 二、RequestBody 三、PathVariable 四、RequestHeader 五、RequestAttribute 六、RequestPart 七、Valid 一、RequestParam 1.作用 用于将请求中的 查询参数 或 表单参数 绑定到方法的参数上。支持 GET 和 POST 请求。 2.使用方法 GetMappin…...
如何使用docker在linux中配置C++环境
目录 1. 安装docker 2. 配置C环境 1)启动ubuntu:22.04容器 2)配置编译环境G 3)安装软件 4)测试 1. 如何打包容器生成tar? a. 生成容器镜像 b. 将镜像压缩成tar 2. 如何将容器内部的端口映射至宿主机…...
darknet_ros 使用教程
首先是git clone可能会因为到没有权限的问题(SSH),此时输入 git clone --recursive https://github.com/leggedrobotics/darknet_ros.git 下载成功之后 catkin_make -DCMAKE_BUILD_TYPERelease catkin失败原因(在CMakefile中&…...
第九课 Vue中的v-bind指令拓展
Vue中的v-bind指令 示例拓展 1)切换样式 <style>.test{width: 100px;height: 100px;border: 3px solid #000;}.bg{background: red;}</style><div id"app"><input type"button" value"点击切换样式" click&qu…...
DOIP协议介绍2-Diagnostic power mode information request (0x4003)消息
DOIP(Diagnostic communication over Internet Protocol)是基于以太网的通讯协议,用于对UDS协议的数据进行传输,规范于ISO13400标准。DOIP的Type:Diagnostic power mode information request(0x4003&#x…...
Eclipse 软件:配置 JDBC、连接 MySQL 数据库、导入 jar 包
目录 一、配置 JDBC (一)作用 (二)官网下载 1. 下载链接 2. 下载 3. 补充:压缩包分类与用途 (三)eclipse 导入 JDBC 的 jar 包 (四)加载数据库驱动 (五…...
二叉树中的最长交错路径
题目链接 二叉树中的最长交错路径 题目描述 注意点 每棵树最多有 50000 个节点每个节点的值在 [1, 100] 之间起点无需是根节点 解答思路 要找到最长交错路径,首先想到的是深度优先遍历因为起点无需是根节点,所以对于任意一个节点,其可以…...
高校企业数据可视化平台功能介绍/特色功能
数据可视化平台是一款适用于高校教学和各领域企业的零门槛可视化工具,能够解决高校数据分析与可视化类课程教学、实训问题。平台采用B/S结构,用户不需要下载客户端,可通过浏览器进行访问。 数据可视化平台提供多种指标设计,学…...
RHCE第三次笔记SSH
第三章 远程连接服务器 1、远程连接服务器简介 (1)什么是远程连接服务器 远程连接服务器通过文字或图形接口方式来远程登录系统,让你在远程终端前登录 linux 主机以取得可操作主机接口(shell ),而登录后…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
