部署Vue项目到githubPage中

news/2025/1/31 6:41:48/

上传Vue项目到githubPage

例如: 看我发布的地址

前提条件

1. github上有一个仓库并且仓库下有两个分支(main 和 gh-pages)

1.1 main分支保存你的vue项目源码(react或者其他框架的都行)
1.2 gh-pages分支保存的是你项目打包之后的代码(如Vue项目打包完之后是个dist包,则gh-pages文件夹存放dist目录下所有的文件,根目录下必须有index.html)

2. 如图在这里插入图片描述
3. 按步骤在github上设置,最后在第五步就能看到你的在线链接了
4. 需要注意的是:
4.1 你每次重新上传到gh-pages分支下无需在操作,它自己就会打包
   git add .git commit -m "备注"git push origin gh-pages
5. vue项目中
      // vue.confing.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: process.env.NODE_ENV === 'production' ? '/use-yt-ui' : '/'})// 根目录下新建 deploy.sh 文件#!/usr/bin/env sh# 当发生错误时中止脚本set -e# 构建npm run build# cd 到构建输出的目录下cd dist# 部署到自定义域域名# echo 'www.example.com' > CNAMEgit initgit add -Agit commit -m 'deploy'# 部署到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 部署到 https://<USERNAME>.github.io/<REPO>git push -f git@github.com:ProgrammerMao-001/use-yt-ui.git master:gh-pagescd -
6. 发布成功

http://www.ppmy.cn/news/1172742.html

相关文章

Character Animator 2024(Ch2024):打造生动角色,让动画设计更上一层楼

Character Animator 2024是一款专为角色动画设计师打造的软件&#xff0c;它可以帮助设计师快速创建出丰富多彩的角色动画。无论是初学者还是专业设计师&#xff0c;都可以通过Character Animator 2024轻松实现自己的创意。 Ch2024独特优势&#xff1a; 实时角色动画&#xf…

HarmonyOS 3.1 API9 集成认证服务提示client id or secret error.

HarmonyOS 3.1 API9 集成认证服务提示client id or secret error. 按照文档来集成认证服务&#xff0c;在做手机认证的时候报了如下的错误。 参考文档 {"code":203890688,"message":"client id or secret error"}翻了几遍文档&#xff0c;好像…

Spring Boot中RedisTemplate的使用

当前Spring Boot的版本为2.7.6&#xff0c;在使用RedisTemplate之前我们需要在pom.xml中引入下述依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><vers…

S5PV210裸机(六):SD卡

本文主要探讨s5pv210的SD的相关知识。 存储 软盘、硬盘、光盘、CD、磁带:磁存储,读写慢、可靠性低 NandFlash、NorFlash:电存储,读写接口时序复杂,接口众多 SD卡、MMC卡、MicroSD、TF卡:统一外部封装和接口,SD兼容MMC标准 iNand、MoviNand、e…

解密代理技术:保障隐私与网络安全

在当今信息时代&#xff0c;网络代理技术是维护隐私和增强网络安全的关键工具。本文将深入研究Socks5代理、IP代理的应用&#xff0c;以及它们在网络安全、爬虫开发和HTTP协议中的关键作用。 引言 随着互联网的不断扩张&#xff0c;我们的在线活动变得日益复杂&#xff0c;也…

演讲回顾 | 龙智专家分享“支撑、共享与安全:芯片开发中的数字资产管理”

近日&#xff0c;龙智亮相D&R IP-SoC China 2023 Day&#xff0c;呈现集成了Perforce与Atlassian产品的芯片开发解决方案&#xff0c;助力企业更好、更快地进行芯片开发。 龙智资深顾问、技术支持部门负责人李培在展会现场带来了主题为《支撑、共享与安全&#xff1a;芯片…

TechSmith Camtasia 2023 for Mac 屏幕录像视频录制编辑软件

​ TechSmith Camtasia for Mac 2023中文破解版 是一款专业的屏幕录像视频录制编辑软件&#xff0c;非常容易就可以获得精彩的截屏视频。创建引人注目的培训&#xff0c;演示和演示视频。Camtasia 屏幕录制软件简化&#xff0c;直观&#xff0c;让您看起来像专业人士。利用Camt…

vue3结合Cesium加载倾斜摄影3dtiles

这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异&#xff0c;为此将解决方法做一个记录&#xff0c;便于其他读者使用。 加载倾斜摄影3dtitle //加载倾斜摄影图像 function init3Dtiles() {const tileSet new Cesium3DTileset({url: "http://1…