【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.mzph.cn/pingmian/56981.shtml

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

相关文章

全网免费的文献调研方法以及获取外网最新论文、代码和翻译pdf论文的方法(适用于硕士、博士、科研)

1. 文献调研 学术搜索引擎(十分推荐前三个&#xff0c;超有用)&#xff1a;使用 Google Scholar(https://scholar.google.com/)(https://scholar.google.com.tw/)(巨人学术搜索‬‬)、&#xff08;三个都可以&#xff0c;镜像网站&#xff09; arXiv(https://arxiv.org/)、&am…

qt页面设计

1. Designer 设计师&#xff08;掌握&#xff09; Designer是Qt内置的一款界面设计程序&#xff0c;设计的界面文件为.ui格式。 C程序员通常不会单独启动Designer&#xff0c;如果要在项目中使用Designer程序&#xff0c;只需要在新建项目时&#xff0c;勾选“创建界面文件”选…

学习C语言(25)

整理今天的学习内容 预处理详解 1.预定义符号 C语言设置了一些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号是在预处理期间处理的 __FILE__&#xff08;进行编译的源文件&#xff09; __LINE__ &#xff08;文件当前的行号&#xff09; __DATE__&#xff08…

Visual Studio 2022安OpenCV可视化工具image watch

1. 打开 VS2022 &#xff0c;扩展 -管理扩展 2. 搜索 Image Watch 关闭VS2022 后 安装 打开视图、调出 Image Watch 窗口 测试代码&#xff1a; #include "opencv2/imgproc.hpp" #include "opencv2/imgcodecs.hpp" #include "opencv2/highgui.…

分布式系统中的Dapper与Twitter Zipkin:链路追踪技术的实现与应用

目录 一、什么是链路追踪&#xff1f; 二、核心思想Dapper &#xff08;一&#xff09;Dapper链路追踪基本概念概要 &#xff08;二&#xff09;Trace、Span、Annotations Trace Span Annotation 案例说明 &#xff08;三&#xff09;带内数据与带外数据 带外数据 带…

Android应用性能优化的方法

Android应用性能优化是一个复杂而关键的过程&#xff0c;涉及多个方面&#xff0c;包括布局优化、网络优化、安装包优化、内存优化、卡顿优化、启动优化等。以下是对这些优化方法的详细解析&#xff1a; 一、布局优化 布局优化是Android性能优化的基础&#xff0c;主要目标是…

【Linux】进程间通信---匿名管道、命名管道(超详解)

目录 匿名管道 管道的创建&#xff1a; 创建子进程&#xff1a; 关闭不需要的fd: 发送消息&#xff1a; 管道的5种特征&#xff1a; 管道的4种情况&#xff1a; 命名管道 创建命名管道&#xff1a; 删除命名管道&#xff1a; 手写命名管道&#xff1a; 完整代码&am…

C语言:函数指针与指针函数的区别*

文章目录 一、函数指针定义语法 二、指针函数定义语法用途 三、函数指针与指针函数的区别本质不同&#xff1a;声明方式&#xff1a; 四、结论 C语言&#xff1a;函数指针与指针函数的区别 在C语言这个充满灵活性和强大表达力的编程世界中&#xff0c;函数指针和指针函数是两个…

小班幼儿攻击性行为的现状研究-以德格县某幼儿园为例(开题报告)

毕业论文(设计)开题报告 题目 题目类别 毕业设计 姓名 专业 班级 学号 一、选题背景及依据(简述国内外研究状况和相关领域中已有的研究成果(文献综述),选题目的、意义,列出主要参考文献) (一)选题背景与依据 1、选题背景 幼儿教育作为个体一生教育的起点,对于儿童…

多线程(七):单例模式指令重排序

目录 1. 单例模式 1.1 饿汉模式 1.2 懒汉模式 2. 懒汉模式下的问题 2.1 线程安全问题 2.2 如何解决 --- 加锁 2.3 加锁引入的新问题 --- 性能问题 2.4 指令重排序问题 2.4.1 指令重排序 2.4.2 指令重排序引发的问题 1. 单例模式 单例模式, 是设计模式中最典型的一种模…

Vision China 2024 | 移远通信以一体化的AI训练及部署能力,引领3C电子制造智能升级

10月14日&#xff0c;由机器视觉产业联盟(CMVU)主办的中国机器视觉展(Vision China)在深圳国际会展中心盛大开幕。作为全球领先的物联网整体解决方案供应商&#xff0c;移远通信应邀参加展会首日举办的“智造引领数质并进”3C电子制造自动化与数字化论坛。 论坛上&#xff0c;移…

PostgreSQL学习笔记:PostgreSQL vs MySQL

PostgreSQL 和 MySQL 都是广泛使用的关系型数据库管理系统&#xff0c;它们有以下一些对比&#xff1a; 一、功能特性 1. 数据类型支持 PostgreSQL&#xff1a;支持丰富的数据类型&#xff0c;包括数组、JSON、JSONB、范围类型、几何类型等。对于复杂数据结构的存储和处理非…

go基础(一)

包声明引入包函数变量语句&表达式注释 package main//包声明import "fmt"//引入包 //函数 func main() {/* 这是我的第一个简单的程序 */fmt.Println("Hello, World!") }基础语法 标记 go程序可以由多个标记组成&#xff0c;可以是关键字&#xff0…

【K8s】专题十四(2):Kubernetes 安全机制之 Security Context

本文内容均来自个人笔记并重新梳理&#xff0c;如有错误欢迎指正&#xff01; 如果对您有帮助&#xff0c;烦请点赞、关注、转发、订阅专栏&#xff01; 专栏订阅入口 | 精选文章 | Kubernetes | Docker | Linux | 羊毛资源 | 工具推荐 | 往期精彩文章 【Docker】&#xff08;全…

rancher安装并快速部署k8s 管理集群工具

主机准备 准备4台主机 3台用于k8s集群 &#xff0c;1台用于rancher 每台服务器新增配置文件 vi etc/sysctl.confnet.ipv4.ip_forward 1 刷新生效 sysctl –p 安装docker 安装的时候可以去github上检索rancher看看最新版本适配那个版本的docker&#xff0c;这里安装23.0.1…

centos升级g++使其支持c++17

centos升级g使其支持c17 升级g的原因现象原因 升级g方法更新镜像源yum升级g版本 总结 升级g的原因 现象 编译最新版本的jsoncpp报一下错误 jsontest.h:87:37: error: ‘hexfloat’ is not a member of ‘std’oss << std::setprecision(16) << std::hexfloat &l…

SQL注入笔记

SQL注入&#xff1a;一种常见的Web安全漏洞&#xff0c;形成的主要原因是web应用程序在接收相关数据参数时未做好过滤&#xff0c;将其直接带入到数据库中查询&#xff0c;导致攻击者可以拼接执行构造的SQL语句。 SQL注入的几个步骤&#xff1a; 1.寻找可能的注入点&#xff…

酸碱PH值与浓度关系

1. 硫酸百分比浓度是指溶液中硫酸的质量占溶液总质量的百分比。‌ 例如&#xff0c;如果100克溶液中含有98克的硫酸&#xff0c;那么硫酸的百分比浓度为98% 2. 1mol/L硫酸对应百分比浓度多少&#xff1f;答&#xff1a;硫酸的质量分数98&#xff0c;1mol/L硫酸98g/L9.8%的硫酸…

Vue2 和 Vue3 的区别

文章目录 Vue2 和 Vue3 的区别核心架构的变化核心变化&#xff1a; 组合式 API&#xff08;Composition API&#xff09;对比&#xff1a;示例&#xff1a; 性能提升响应式系统改进TypeScript 支持TypeScript 的对比&#xff1a; Fragment 支持编译优化Tree-shaking 与更轻的运…

Android activity 启动流程

Android activity 启动流程 本文主要记录下acitivty的启动流程. 1: Activity 我们都知道启动activity调用方法: startActivity(Intent intent)startActivity(Intent intent, Nullable Bundle options)startActivityForResult(RequiresPermission Intent intent, int reques…