vue项目实现github在线预览功能


Posted in Javascript onJune 20, 2018

最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。

这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github

问题1

当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件

vue项目实现github在线预览功能 

我们先尝试在浏览器打开 index.html

vue项目实现github在线预览功能 

咦,为什么页面显示是空白的?打开控制台,细心的朋友可能会发现, script 标签的引入路径好像不对啊,因为 static 文件夹和 index.html 是在同一个目录下的,这里却是从根目录引入 static 下的文件,正确的路径应该是 ./ 开头的相对路径: src='./static/...' 或者 src='static/...'

是哪里出了问题?其实这跟配置资源的路径有关,打开项目根目录 config 文件夹下的 index.js ,定位到 build 下的 assetsPublicPath (dev下也有一个assetsPublicPath,别搞错了,我就是在这里踩了第一个坑),把

assetsPublicPath: '/' 修改为 assetsPublicPath: './'

vue项目实现github在线预览功能 

这下可找出原因,因为这里把静态资源路径设置为在根目录下,所以 script 标签的引入路径就找不到 static 文件夹下的文件了

重新执行 npm run build ,再打开 index.html 文件

vue项目实现github在线预览功能 

OK!在浏览器可以看到页面效果了!

也行你会问,为什么 assetsPublicPath 的路径要设置为在根目录下,这不是在折腾我们吗?其实这是因为在真正的项目开发中, index.htmlstatic 文件夹会被放到服务器的根目录下,然后进行线上发布。

问题2

本地预览问题解决了,接着我们把项目 pushgithub

vue项目实现github在线预览功能 

这里又出问题了! dist 文件没有被上传到 github ,怎么回事?找到项目根目录的 .gitignore 文件,这里设置一些文件名,对应的文件将不会被提交到 github 上面,而 dist 被设置在里面,所以就不能上传到 github 上了,我们可以把 dist 从文件里移除。 当然还有另一种办法,就是在操作 git 命令时,把 git add. 改为 git add -f

dist 意思是强制把 dist 文件提交到 github

vue项目实现github在线预览功能

好了,现在我们已经可以在 github 仓库里看到 dist 文件夹。

疑惑,什么 dist 文件夹要设置不被提交? 试想一下,在真正项目开发中, dist 文件夹中的 staticindex.html 最终是要被扔到服务器上的,而不是提交到 github 上。

现在还是不能实现项目的线上预览效果,点击项目的 setting 项,然后找到 Github Pages

vue项目实现github在线预览功能 

选择 master branch ,保存,接着你会看到项目在线预览链接,点击链接

vue项目实现github在线预览功能 

此时,你会看到页面一片空白,别急,在地址栏后面添加 dist (因为 index.html 是在 dist目录 下),回车,好了,线上页面效果出来了

vue项目实现github在线预览功能

至此,项目的在线预览效果就实现了!!

还没有结束!在项目的 master 分支上,混合了源代码和页面预览文件,能不能把两者分开?而且还有一个问题, index.html 总是在 dist 路径下的,能不能项目名称直接跟 index.html 。这里就引出另外一种办法了。

另外一种办法

采用 githubgh-pages 分支制作 GitHub Pages ,只把 dist 添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了

(先把本地的 dist 文件夹删除,再上传到 github ,更新 master 分支)

git 命令操作

git run build      
  git branch gh-pages   //创建gh-pages分支
  git checkout gh-pages  //切换到gh-pages分支
  git add -f dist     //强制把dist文件夹提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夹单独部署到gh-pages分支

vue项目实现github在线预览功能 这里要选择 gh-pages branch ,再点击连接,如果此时看到空白页面,别急,稍等一会(内容更新需要时间)

好了,现在看仓库的 master 分支,不存在 dist 文件夹了,再看线上预览地址,也完美了

vue项目实现github在线预览功能
vue项目实现github在线预览功能

总结

以上所述是小编给大家介绍的vue项目实现github在线预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
Vue.use源码学习小结
Jun 20 #Javascript
Vuex入门到上手教程
Jun 20 #Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
You might like
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python join方法使用详解
2019/07/30 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python logging日志模块原理及操作解析
2019/10/12 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
个人求职信范文
2014/05/24 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
小型婚礼主持词
2015/06/30 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android