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

news/2025/2/15 3:26:28/

文章目录

    • 第一步:打包
    • 第二步: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_22">第二步: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_57">第五步:上传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项目后白屏问题


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

相关文章

#渗透测试#批量漏洞挖掘#Crocus系统—Download 文件读取

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…

计算机网络综合实训室解决方案(2025年最新版)

一、计算机网络综合实训室概述 数字化转型的关键在于计算机网络技术的支撑,因此,当前教育教学的一大热点及社会需求,在于培养能够全面设计计算机整体系统、实施综合布线、安装网络设备并进行调试与维护的专业人才。鉴于计算机网络技术的高度…

【推荐】碰一碰发视频源码搭建,支持OEM

引言:重新定义视频分享体验 在移动优先的互联网时代,"碰一碰"交互已成为设备间快速连接的代名词。本文将突破传统文件传输思维,结合Web NFC与WebRTC技术,实现无需后端服务器的端到端视频实时传输方案。通过纯前端技术栈…

从零开始设计一个完整的网站:HTML、CSS、PHP、MySQL 和 JavaScript 实战教程

前言 本文将从实战角度出发,带你一步步设计一个完整的网站。我们将从 静态网页 开始,然后加入 动态功能(使用 PHP),连接 数据库,最后加入 JavaScript 实现交互功能。通过这个教程,你将掌握一个…

Linux ln创建、删除软链接的正确方式

在 Linux 系统中,ln 命令用于创建链接文件,链接分为软链接(符号链接)和硬链接。以下详细介绍创建和删除软链接的正确方式: 创建软链接 基本语法 ln -s [源文件或目录] [目标软链接文件或目录] -s 选项:…

解决 DeepSeek 官网服务器繁忙的实用方案

解决 DeepSeek 官网服务器繁忙的实用方案 大家在使用 DeepSeek 时,是不是经常遇到官网服务器繁忙,等半天都加载不出来的情况?别担心,今天就给大家分享一个用 DeepSeek 硅基流动 Cherry Studio 解决这个问题的实用方案&#xff…

uake 网络安全 reverse网络安全

首先从PEID的算法分析插件来介绍,要知道不管是在CTF竞赛的REVERSE题目中,还是在实际的商业产品中,很多程序都喜欢使用成熟的标准算法来作为注册算法的一个部分,如MD5、Blowfish等。这些算法本身往往就十分复杂和难以你理解&#x…

前端大屏适配方案:从设计到实现的全流程指南

引言 随着数据可视化需求的增长,大屏展示项目在前端开发中越来越常见。然而,大屏开发面临独特的挑战: 屏幕分辨率多样:从1080P到4K甚至8K,如何保证清晰度?布局复杂:多图表、多组件如何合理排列…