GitHub | 在 GitHub 上在线展示 Vue 项目

简洁版:上传所有代码 << 构建项目并上传 dist 目录 << 设置仓库 << 访问


Step1:在 GitHub 上新建仓库,并将 Vue 项目的代码 push 到该仓库中。坑点在于,如果你是从 GitHub 上 clone 的别人的项目,那么在使用 git 时,需要修改 origin 的 URL 地址为你自己仓库的地址,代码如下。

git remote set-url origin git@github.com:<你自己仓库的SSH地址>

我就差点提交到别人的仓库去了 TT

Step2:如果此前你从来没有对项目进行 build(构建)的话,那么是不会有这个 dist 目录的(如下)而要想使用 GitHub Pages 功能在线展示项目网页,这个 dist 目录又是必不可少的。

因此,我们需要 build 项目,并将生成的 dist 目录上传到 GitHub 仓库中。

Step3:在使用 npm run build 时可能报错 “npm ERR! missing script: build”,这是因为你的项目没有定义名为 “build” 的脚本。因此,到项目中的 package.json 文件中查看现有的脚本:

比如,我的项目中定义的 build 脚本如上,那么我应该输入命令:

npm run build:prod

我随便选的,因为第一个看起来更正常。

Step4:build 完毕后,我们将得到 Step2 中展示的 dist 目录,里面装有一个 HTML 页面和一些静态资源。

如果你点开 index.html,发现是一片空白,那么可能需要修改项目中的 vue.config.js 文件,如下图所示。

我这里原本是 publicPath: "/",少了一个点,修改后再打包,最终 HTML 显示成功。如果你没有这一行,那么可能需要添加上去(我刷到过其他博客是这样解决的)

Step5:如果 index.html 显示成功了,那么我们就可以把 dist 目录上传到仓库中了。

在跳转后的页面,把 dist 目录拖拽进去,最后 commit 即可。

为什么要手动上传?因为 git 不会 push 打包文件,所以要单独上传 dist 文件。

Step6:最后一步,如下图红框所示设置仓库。

最后一个坑点。你直接点击 “Visit site” 访问的页面是你的 README.md,而不是你的项目主页。需要在上图 URL 地址的最后加上 “dist”,才能访问到项目主页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693845.shtml

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

相关文章

安装unget包 sqlsugar时报错,完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…

k-means聚类、GMM高斯聚类、canopy聚类、DBSCAN聚类、FCM聚类、ISODATA聚类、k-medoid聚类、层次聚类、谱聚类 对比

k-means聚类、GMM高斯聚类、canopy聚类、DBSCAN聚类、FCM聚类、ISODATA聚类、k-medoid聚类、层次聚类、谱聚类 对比 标 代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取代码获取题 GMM&#xff08;高斯混合模型&#xff09;是一种聚类算法&#xff…

Http改为Https后该如何测试

需要了解Http和Http之间的关系&#xff0c;他们之间都有哪些优点&#xff0c;哪些缺点&#xff0c;如果使用的产品进行了更改&#xff0c;该如何进行测试等等&#xff0c;Https提供了一个安全层&#xff08;SSL/TLS&#xff09;&#xff0c;这个安全层在客户端和服务器之间提供…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-GPIO

目录 一、GPIO 概述二、GPIO模块相关API三、实例四、GPIO HDF驱动开发4.1、LED驱动程序(待续...)4.2、LED驱动配置(待续...) 坚持就有收获 轻量系统设备通常需要进行外设控制&#xff0c;例如温湿度数据的采集、灯开关的控制&#xff0c;因此在完成内核开发后&#xff0c;需要进…

SpringBootWeb学习笔记——12万字详细总结!

0. 写在前面 注:这套笔记是根据黑马程序员B站2023-3-21的视频学习的成果,其中省略了前端基础部分、Maven部分和数据库基础部分,详情可见目录。 注注:目前文章内结尾处多幅图片加载不出来,因为图片还存在本地没被传上来,过段时间再改~ 所有的Spring项目都基于Spring Fra…

升级到PHP8.X的原因和方法

上周有一个使用Hostease美国主机服务器多年的客户&#xff0c;反馈需要升级到PHP8.x&#xff0c;原因是站点程序已升级&#xff0c;并希望站点运行在更高也稳定的PHP8.x上。在升级PHP8.x的过程中&#xff0c;联系我们并反馈在升级过程中遇到了问题&#xff0c;需求解决方案。 升…

雷池社区版WAF:开源护网,共筑网络安全长城

雷池社区版WAF&#xff08;Web Application Firewall&#xff09;是一款开源的网络应用防火墙&#xff0c;旨在为网站和网络应用提供安全防护&#xff0c;以抵御各种网络攻击&#xff0c;如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;、文件包含、以及其他常见的安全威胁…

Linux 常用命令100+

Linux 运维/开发/测试 常用命令100 线上查询及帮助命令(2个) 命令功能说明示例man 命令查看普通命令帮助&#xff0c;命令的词典&#xff0c;更复杂的还有info&#xff0c;但不常用。rootbrLinux ~]#man lshelp 命令查看Linux内置命令的帮助&#xff0c;比如cd命令。[rootbrL…

comsol燃料电池+锂离子电池

电化学仿真技术通过对电池微观行为进行研究&#xff0c;明晰电池内部多现象机理&#xff0c;并将其数值化&#xff0c;通过数值法实现对物理特征联合计算&#xff0c;建立完整的电池模型。COMSOL Multiphysics 具有强大的多物理场全耦合仿真分析功能、高效的计算性能&#xff0…

低代码中的工作流:简化开发流程,提升效率

低代码开发平台近年来在软件开发领域引起了广泛的关注和应用。它以提高开发效率、降低开发成本为目标&#xff0c;通过简化开发过程&#xff0c;使非专业开发者也能快速构建高品质的应用程序。其中&#xff0c;工作流引擎作为低代码开发平台的重要组成部分&#xff0c;对于提升…

文件上传漏洞--Upload-labs--Pass17--条件竞争

一、条件竞争原理&#xff08;结合代码审计&#xff09; 1、首先进行代码审计&#xff0c;查看源代码。 我们可知&#xff0c;将文件上传至服务器后&#xff0c;不会被立即删除&#xff0c;而是做短暂的停留&#xff0c;中间会有一小部分时间差&#xff0c;这部分时间差是代码…

华为OD机试真题C卷-篇4

200分值题 员工派遣快递员的烦恼符号运算伐木工反射计数分披萨推荐多样性贪心的歌手螺旋数组矩阵(100) 员工派遣 nums [int(x) for x in input().split(" ")] x nums[0] y nums[1] count_x nums[2] count_y nums[3] left 1 right pow(10, 9) while (True) :if…

vue 实现docx文件在线预览

预览请求步骤&#xff1a; 准备一个需要预览的文件地址【如:https://usdoc.cn/vw/文件模板.docx】GET 参数到请求地址将拼接好的地址放在浏览器中&#xff0c;开始预览 请求地址&#xff1a;https://vw.usdoc.cn/ 请求方式&#xff1a;GET 请求参数: 字段名称字段类型必填参数…

2024年单服务器部署Mongodb三节点副本集自动化部署脚本

该脚本是为了方便自己学习和工作中部署服务器从而节省时间进行编写&#xff0c;目前能正常部署&#xff0c;创建集群&#xff0c;管理员用户&#xff0c;以及连接都没问题&#xff0c;但是没有开启验证&#xff0c;后续找时间补充。 完整的教程请参考一下我写的技术文章。 20…

渲染效果图有哪几种分类?效果图为什么用云渲染更快

云渲染利用了集群化的云端服务器资源&#xff0c;通过并行计算充分发挥了高性能硬件的优势&#xff0c;显著提升了渲染的速度。这一技术特别适用于处理规模庞大或细节丰富的渲染任务&#xff0c;在缩短项目完成时间方面表现卓越。无论是用于为建筑提供精确的可视化效果图&#…

【Python Scrapy】分布式爬虫利器

在当今信息爆炸的时代&#xff0c;获取大规模数据对于许多应用至关重要。而分布式爬虫作为一种强大的工具&#xff0c;在处理大量数据采集和高效爬取方面展现了卓越的能力。 本文将深入探讨分布式爬虫的实际应用场景&#xff0c;通过代码示例演示其在提升爬取效率、保障系统稳定…

牛刀小试 - C++ 学生信息管理系统

参考文档&#xff1a; C实现&#xff1a;学生管理系统&#xff08;详细解析&#xff09; 关于switch中的default里面的break是否可以省略这件事 需求要求&#xff1a; &#xff08;1&#xff09;增加记录 &#xff08;2&#xff09;查找记录 &#xff08;3&#xff09;删除…

FFmpeg进阶-给视频添加马赛克效果

很多时候为了隐藏视频中的敏感信息如人脸、身份证号、车牌号等,我们会采用马赛克算法对视频帧中的一部分内容进行处理。这里介绍一下如何采用FFmpeg实现马赛克效果。 马赛克效果算法的原理如下: 1.分块处理:首先将图像划分为多个小块或区域 2.像素替换:对于每个小块,算法会将…

【Windows11】内存使用率只有总内存容量的一半

硬件配置&#xff1a;2根16G的内存条&#xff08;金百达DDR4 3600, 海力士颗粒&#xff0c;灯条刃&#xff09;&#xff0c;插在2和4通道上 系统配置&#xff1a;windows11 问题描述&#xff0c;我和这位网友的问题一模一样&#xff1a; 系统32G内存&#xff0c;开机完全识别&…

实习日志17

1.测试公司服务器 1.1.太卡了&#xff0c;点一下卡半天 上传项目源码和文件&#xff1a; 将活字格项目源码和所有相关文件上传到服务器的指定目录。可以使用向日葵远程控制或者版本控制系统来进行文件上传。 重新配置活字格项目&#xff1a; 根据服务器环境&#xff0c;需要对…