当前位置: 首页 > news >正文

【Vue】打包vue3+vite项目发布到github page的完整过程

文章目录

    • 第一步:打包
    • 第二步:github仓库设置
    • 第三步:安装插件gh-pages
    • 第四步:两个配置
    • 第五步:上传github
    • 其他问题
      • 1. 路由
      • 2.待补充
    • 参考文章:


环境:
vue3+vite
windows11(使用终端即可)
“vue”: “^3.5.13”,
“vue-router”: “^4.5.0”,
“gh-pages”: “^6.3.0”,

第一步:打包

先进入你vue项目的地方

cd xxxxxxxx

然后,把项目打包

npm run build

打包完一般长这样,多出一个dist文件夹目录csdn祁许

这里的index.html就是适配后面github page要求的主页,没有这个静态页面无法正确启动

第二步:github仓库设置

GitHub官网网址

首先你必须应该有一个你个人账号的github仓库
且安装好了git相关配置
且必须是public公开的仓库!(除非你准备花钱开私人的那个page服务)

第三步:安装插件gh-pages

回到你的vue项目
在你打包的同一个目录下,安装一个专门用于打包vue的插件

 npm install --save-dev gh-pages

第四步:两个配置

在vite.config.js文件里加上base:你的仓库名称!(注意路径和引号都不要省略,根据自己的实际情况有些可能是直接根目录'./',我这次打包不是)

export default defineConfig({base: '/github仓库名称/',xxxxxxx})

在package.json文件里加上deploy这一行,用于后续运行deploy打包直接输出到github

"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","deploy": "gh-pages -d dist"},

第五步:上传github

npm run deploy

然后等一会,会显示如下
csdn祁许
published出来,就证明没问题了
进入你的仓库,找到Setting进入设置再点击Pages,可以看到上面一般有一个网址
csdn祁许
去访问就行了

注意!默认是上传到gh-pages分支了的!
所以如果page里设置save的是这个分支则是正确的
在这里插入图片描述


其他问题

1. 路由

在使用插件前,我试过手动上传,于是白屏了,根据查资料发现可能一个原因是vue-router,index.js文件里需要改成Hash

const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL), //原来是createWebHistoryroutes: [………],
})

改完会发现网址多了个井号#,这可能是一个问题解决办法。

2.待补充

参考文章:

GitHub Pages 快速入门 - GitHub 文档
GitHub Pages部署vue项目后白屏问题

相关文章:

【Vue】打包vue3+vite项目发布到github page的完整过程

文章目录 第一步:打包第二步:github仓库设置第三步:安装插件gh-pages第四步:两个配置第五步:上传github其他问题1. 路由2.待补充 参考文章: 环境: vue3vite windows11(使用终端即可&…...

Flutter编译问题记录

问题: 运行出现以下报错 Launching lib/main.dart on macOS in debug mode... Warning: CocoaPods not installed. Skipping pod install. CocoaPods is a package manager for iOS or macOS platform code. Without CocoaPods, plugins will not work on iOS or …...

poetry shell - 作为插件安装和使用

安装插件 安装完 poetry,想进入环境,执行 poetry shell 后会报错,是因为 poetry shell 在后面的版本中,是作为插件,需要额外安装。 poetry self add poetry-plugin-shell关于 poetry-plugin-shell github : https:/…...

UE5中的快捷键汇总

以下是Unreal Engine 5(UE5)中一些常用的快捷键大全,涵盖编辑器操作、视口导航、蓝图编辑等多个方面(会持续补充作为笔记存在): 通用快捷键 快捷键功能Ctrl S保存当前关卡Ctrl Shift S保存所有Ctrl Z撤销Ctrl C复制Ctrl V…...

2月14(信息差)

🌍杭州:全球数贸港核心区建设方案拟出台 争取国家支持杭州在网络游戏管理给予更多权限 🎄Kimi深夜炸场:满血版多模态o1级推理模型!OpenAI外全球首次!Jim Fan:同天两款国产o1绝对不是巧合&#x…...

ElementUI 的组件 Switch(开关)如何让文字显示在按钮上

效果图&#xff1a; 一、引入switch组件 给组件自定义一个类&#xff1a;tableScopeSwitch&#xff0c;设置开关的值和对应展示的文字&#xff08;开为 1&#xff0c;并展示启用&#xff1b;关为 0&#xff0c;并展示禁用&#xff09;。 <div class"tableScopeSwitch…...

Redis常用的五种数据结构详解

一、Redis 数据库介绍 Redis 是一种键值&#xff08;Key-Value&#xff09;数据库。相对于关系型数据库&#xff08;比如 MySQL&#xff09;&#xff0c;Redis 也被叫作非关系型数据库。 像 MySQL 这样的关系型数据库&#xff0c;表的结构比较复杂&#xff0c;会包含很多字段&…...

stm32 CubeMx 实现SD卡/sd nand FATFS读写测试

文章目录 stm32 CubeMx 实现SD卡/SD nand FATFS读写测试 1. 前言 2. 环境介绍 2.1 软硬件说明 2.2 外设原理图 3. 工程搭建 3.1 CubeMx 配置 3.2 SDIO时钟配置说明 3.2 读写测试 3.2.1 添加读写测试代码 3.3 FATFS文件操作 3.3.1 修改读写测试代码 3.4 配置问题记…...

【Unity】 HTFramework框架(六十)Assistant助手(在Unity中接入DeepSeek等AI语言大模型)

更新日期&#xff1a;2025年2月14日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 Assistant助手安装Ollama使用Assistant&#xff08;在编辑器中&#xff09;打开Assistant配置Assistant使用Assistant处理Assistant回复的内容使用推理大…...

web自动化笔记(二)

文章目录 一、参数化测试1.pytest命令2.实现参数化测试3.填写地址测试4.生成Allure测试报告5.关键字驱动 二、案例1.实现后台登录1.1登录1.2.处理验证码1.3.封装识别验证码函数 2.通过cookie保持登录2.1给页面添加cookie2.2获取页面的cookie2.3自动化获取cookie 三、excel进行数…...

IIS部署netcore程序后,出现500.30错误解决方案之一

netcore程序部署到IIS后一直出现错误&#xff0c;访问首页后会跳转到登录页地址&#xff0c;然后看到如下错误 HTTP Error 500.30 - ANCM In-Process Start Failure Common solutions to this issue: The application failed to start The application started but then stopp…...

spring 学习(spring-Dl补充(注入不同类型的数据))

前言 在之前的案例&#xff0c;列举的最多的是注入 对象。本篇博客则是补充说我们不仅可以注入对象 还可以注入其他的数据类型包括基本数据类型&#xff0c;引用数据类型。 注入基本数据类型 常见的基本数据类型有&#xff1a;short char int long float double boolean …...

Docker Desktop之Nginx

安装Nginx 把这个复制 到docker 中执行 即可...

利用ffplay播放udp组播视频流

ffplay -fs -fflags nobuffer -flags low_delay -analyzeduration 0 -probesize 32 -framedrop -sync ext -strict experimental udp://224.1.1.1:5001 -fs : 全屏显示 -fflags nobuffer &#xff1a; 禁用输入缓冲&#xff08;减少100-200ms缓冲延迟&#xff09; -an…...

【教程】MySQL数据库学习笔记(七)——多表操作(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 第四章 《数据操…...

2025.2.14——1400

2025.2.14——1400 A 1400 B 1400 C 1400 D 1400 E 1400 F 1400 G 1400 H 1400 ------------------------------------------------ 思维排序/双指针/二分/队列匹配思维二分/位运算思维数学思维 A 一眼想到的是维护信息计数。维护两个信息同时用长的一半去找短的一半…...

DeepSeek教unity------MessagePack-04

Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中&#xff0c;这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...

Java异常体系深度解析:从Exception到Error

文章目录 前言一、Java异常体系概览ExceptionError 二、受检异常与非受检异常受检异常&#xff08;Checked Exception&#xff09;非受检异常&#xff08;Unchecked Exception&#xff09; 三、常见的Error类型四、异常处理机制try-catch-finally结构Throws关键字 五、自定义异…...

【linux】文件与目录命令 - ln

文章目录 1. 基本用法2. 常用参数3. 用法举例4. 注意事项 ln 命令用于在文件系统中创建硬链接或符号链接&#xff08;软链接&#xff09;&#xff0c;是文件共享和路径引用的常用工具。 1. 基本用法 语法&#xff1a; ln [选项] 源文件 [目标文件/目标目录]功能&#xff1a; 创…...

Xilinx kintex-7系列 FPGA支持PCIe 3.0 吗?

Xilinx kintex-7系列资源如下图 Xilinx各系列的GT资源类型和性能 PCIe Gen1/2/3的传输速率对比 K7上面使用的高速收发器GTX最高速率为12.5GT/s&#xff0c; PCIe Gen2 每个通道的传输速率为 5 GT/s。 PCIe Gen3 每个通道的传输速率为 8 GT/s。 所以理论上硬件支持PCIe3.0&#…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...