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

这篇具有很好参考价值的文章主要介绍了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 目录又是必不可少的。

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

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

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

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

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

npm run build:prod

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

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

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

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

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

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

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

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

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

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

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

GitHub | 在 GitHub 上在线展示 Vue 项目,软件,github,vue.js,前端

最后一个坑点。你直接点击 “Visit site” 访问的页面是你的 README.md,而不是你的项目主页。需要在上图 URL 地址的最后加上 “dist”,才能访问到项目主页。文章来源地址https://www.toymoban.com/news/detail-833522.html

到了这里,关于GitHub | 在 GitHub 上在线展示 Vue 项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目中定制化音频展示,wavesurfer.js基本使用

    效果图: wavesurfer是一个可定制的音频波形可视化,建立在Audio API和HTML5 Canvas之上。 基本使用: wavesurfer常用参数: container:必填,可以是唯一的css3选择器,也可以是DOM元素 scrollParent:true/false,要使波形滚动。 audioRate:播放音频的速度。数字越小越慢。 backgroundColor:更改波

    2024年02月08日
    浏览(40)
  • 如何将github上的Vue项目在本地运行起来?

    今天在github逛的时候发现几个Vue博客前端模板,觉得挺好看的,就拉到本地上,启动项目发生报错,捣鼓一会儿,下面将介绍,如何成功地将项目运行起来。 1.打开package.json文件 如果显示serve,就在终端切换到项目,输入 npm run serve ,进行启动。若显示dev,就 npm run dev 原因:因为

    2024年02月13日
    浏览(42)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(54)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(76)
  • GitHub标星17K,超火的SpringBoot +Vue实战项目,文档视频贼全

    技术选型 ==== 核心框架:SpringBoot2.1.8 安全管理:Spring Security 持久层框架:MyBatis 缓存:Redis 数据库:MySQL8 消息队列:RabbitMQ 即时通信:WebSocket 文件存储:FastDFS 前端框架:Vue+ElementUI+Vuex 前端网络请求:axios 技术要点 ==== 基于 Spring Security 搭建动态权限管理系统。 前端 Vue 采

    2024年04月16日
    浏览(48)
  • 【vue-element-admin】github高质量vue项目解读,小白都能看懂(第三篇)

    日月几何,天地玄黄,今日奇观,书接上一回。 这次我们来讲 panel-group / 组件 因为本文是跟着项目来的,所以不从第一篇看起的小伙伴云里雾里,所以针对以上情况,我决定对于 vue-element-admin 项目出现的大部分技术栈以及知识点(比如:element-ui,echarts,vuex等等)进行讲解

    2024年02月02日
    浏览(54)
  • 【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】

    下载axios 引用axios: import axios from \\\'axios\\\' 解决跨域方法: 1 cors: 2 jsonp:用的少,只能解决get请求的跨域问题 3 配置一个代理服务器 配置一个代理服务器方式一: 开启8080代理服务器方式:nginx(较复杂,需借助后端知识) 、vue-cli(重点)。 1 第一步:先通过cmd打开两台服务器 打

    2024年01月20日
    浏览(37)
  • 04.使用 github actions+docker 自动部署前后端分离项目 zhontai (.net core+vue)

    Github Actions是什么?是 GitHub 提供的一种持续集成/持续部署(CI/CD)工作流程自动化服务,助力项目的自动化构建、测试和部署。 依托于平台,本文将分享使用 GitHub Actions 完成对一个.Net Core+Vue 的前后端分离项目 zhontai 的构建,并使用 docker 部署到云服务器(阿里云) 经过一番尝

    2024年02月11日
    浏览(61)
  • 【前端】vue.js从入门到项目实战笔记

    【前端目录贴】 文本插值中的代码被解释为节点的文本内容,而HTML插值中的代码则被渲染为视图节点。 3.1.1 文本插值 文本插值的方式:用 双大括号 将要绑定的变量、值、表达式括住就可以实现,Vue将会 获取计算后的值 ,并以 文本的形式 将其展示出来。 结果: 3.1.2 HTM

    2024年01月21日
    浏览(52)
  • Golang学习日志 ━━ 通过将gin-vue-admin项目上传到自己的仓库并且与原版保持更新来学习github操作

    gin-vue-admin是一套国人用golang开发的后台管理系统,本文是从作者早期原文中截取的一部分,后期会以本文为框架进行扩展说明。 官网:https://www.gin-vue-admin.com/ 学习视频:https://www.bilibili.com/video/BV1kv4y1g7nT/?p=6 在gin-vue-admin根目录里打开终端,执行 此时已经把自己的代码推到自

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包