【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;带内数据与带外数据 带外数据 带…

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

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

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

目录 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、范围类型、几何类型等。对于复杂数据结构的存储和处理非…

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…

酸碱PH值与浓度关系

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

RNN,LSTM,GRU的区别和联系? RNN的梯度消失问题?如何解决?

RNN&#xff0c;LSTM&#xff0c;GRU的区别和联系? RNN&#xff08;Recurrent Neural Network&#xff09;、LSTM&#xff08;Long Short-Term Memory&#xff09;和GRU&#xff08;Gated Recurrent Unit&#xff09;都是用于处理序列数据的神经网络模型&#xff0c;它们之间…

动态规划:17.简单多状态 dp 问题_买卖股票的最佳时机III_C++

题目链接&#xff1a; 一、题目解析 题目&#xff1a;123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; 解析&#xff1a; 拿示例1举例&#xff1a; 我们可以如图所示买入卖出股票&#xff0c;以求得最大利润&#xff0c;并且交易次数不超过2次 拿示…

二百六十九、Kettle——ClickHouse清洗ODS层原始数据增量导入到DWD层表中

一、目的 清洗ClickHouse的ODS层原始数据&#xff0c;增量导入到DWD层表中 二、实施步骤 2.1 newtime select( select create_time from hurys_jw.dwd_statistics order by create_time desc limit 1) as create_time 2.2 替换NULL值 2.3 clickhouse输入 2.4 字段选择 2.5 …

Git的原理和使用(三)

1. 分支管理 1.1 合并模式 1.1.1 fast forward模式 git log --graph --abbrev-commit 1.1.2 no-ff模式 合并出现问题后需要进行手动修改&#xff1a; 如下图所示&#xff1a; 1.1.3 不使用no-ff模式 git merge --no-ff -m "merge dev2" dev2 1.2 分⽀策略 在实际开…

多IP访问多网段实验

文章目录 多IP访问多网段实验 多IP访问多网段实验 在当前主机配置多个IP地址&#xff0c;实现多IP访问多网段&#xff0c;记录所有命令及含义 1&#xff0c;环境搭建&#xff1a; [rootlocalhost ~]# mount /dev/sr1 /mnt # 设置ISO虚拟镜像文件文件挂载点&#xff0c;将…

数据分析和可视化python库orange简单使用方法

Orange 是一个基于 Python 的数据挖掘和机器学习库&#xff0c;它提供了一系列可视化工具和算法&#xff0c;用于数据分析、机器学习和数据可视化等任务。 一、主要特点 可视化界面&#xff1a;Orange 提供了直观的可视化界面&#xff0c;使得用户可以通过拖放操作构建数据分…

【python爬虫实战】爬取全年天气数据并做数据可视化分析!附源码

由于篇幅限制&#xff0c;无法展示完整代码&#xff0c;需要的朋友可在下方获取&#xff01;100%免费。 一、主题式网络爬虫设计方案 1. 主题式网络爬虫名称&#xff1a;天气预报爬取数据与可视化数据 2. 主题式网络爬虫爬取的内容与数据特征分析&#xff1a; - 爬取内容&am…

算法(四)前缀和

前缀和也是一个重要的算法&#xff0c;一般用来快速求静态数组的某一连续区间内所有数的和&#xff0c;效率很高&#xff0c;但不支持修改操作。分为一维前缀和、二维前缀和。 重要的前言&#xff01; 不要死记模板&#xff0c;具体题目可能是前缀和、前缀乘积、后缀和、后缀乘…

已解决:ModuleNotFoundError: No module named ‘pip‘

[已解决] ModuleNotFoundError: No module named ‘pip‘ 文章目录 写在前面问题描述报错原因分析 解决思路解决办法1. 手动安装或升级 pip2. 使用 get-pip.py 脚本3. 检查环境变量配置4. 重新安装 Python 并确保添加到 PATH5. 在虚拟环境中安装 pip6. 使用 conda 安装 pip&…