vue项目发布到github上,到线上预览

时间:2024-04-13 10:18:30

前言:

从你一个本地的html文件到一个github  https可访问的(https://hollowshun.github.io/pc/dist/index.html)页面。

1.前提有github,没有的注册一个(基本操作和gitlab,gitee,差不多一样)

2.你有一个html,或一个项目,或自己写的一个demo。

准备完成进入正题

我有一个自己写的demo,先看下我的项目文件目录

vue项目发布到github上,到线上预览

没错,就是一个简单的vue搭建的一个通用的官网外壳。下面就来实现怎么用https://hollowshun.github.io/pc/dist/index.html这个地址来访问这个demo。简单暴力,几步搞定,保证一看就会,一试就废(那是不可能的)

一、打开登录到github上(1、2、3、4)新建一个project

vue项目发布到github上,到线上预览

 

二、点击new会看到(然后1、2、3)就行了。(看不懂可以翻译的啊๑乛◡乛๑)

vue项目发布到github上,到线上预览

3、创建成功,可以看到一个熟悉的地址,没错git clone 它,当然下面有不同的方式,有现成的项目可以直接导入,迁移过来等,咱没有,就clone了

vue项目发布到github上,到线上预览

4、然后你就去写你的项目啦,本次已vue的一个demo为例,你去init一个vue项目(随便一个html也行),写完执行 git add .   git commit -m "啦啦啦"  git push origin master,顺便在npm run build 一下(等会要访问打包后的index.html)。至此你会看到,图一那样,你的项目就上传到github上了。

 

5、先在本地打开你的dist里的index.html,看看在浏览器中能不能打开,正常运行,不能的话明你打包错了,请移步到

https://blog.****.net/weixin_44314258/article/details/103491418

改下你的打包路径,确保本地dist里的index.html能在浏览器中打开

 

6、这时你仓库里是不会有dist文件的,这是单独上传的,push是不会push打包文件的,上传dist文件

vue项目发布到github上,到线上预览

现成的upload files点击一下,直接把刚刚build的dist文件拖进去就行了,然后点击commit确认就行了,这个时候你就发现有仓库里dist文件了

vue项目发布到github上,到线上预览

6、点击settings后往下滑vue项目发布到github上,到线上预览 

找到 下图,选择你的页面,none改成master分支

vue项目发布到github上,到线上预览

 

等刷新好再回来一看,说你的项目已经发布到  (一个链接 )上了,

vue项目发布到github上,到线上预览

点击链接进去,显示空白,哈哈,这次不是打包出错,因为这只是你的项目的地址,后面加上你的dist/index.html,再进去就好了。

例如     https://hollowshun.github.io/pc/dist/index.html

至此完毕,你会发现前面那么麻烦新建项目,上传项目都没啥用(哈哈),最终访问的是后面上传的dist文件里的index.html,没错,所以说了你直接上传一个html文件就行了,本次以vue的一个项目为例,写的有用的例子就拿过来分享一下了,博客配github项目源码才有说服力。ok拜拜了,加油奥利给