github在线预览总结

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

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

问题1

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

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

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

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

assetsPublicPath: ‘/’ 修改为 assetsPublicPath: ‘./’

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

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

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

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

问题2

本地预览问题解决了，接着我们把项目 push 到 github

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

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

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

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

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

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

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

至此，项目的在线预览效果就实现了！！

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

另外一种办法

采用 github 的 gh-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分支

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分支

这里要选择 gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）

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

总结

以上所述是就是总结的vue项目实现github在线预览功能的方法。

github在线预览总结相关推荐

SpringBoot实现万能文件在线预览，已开源，真香！！！
欢迎关注方志朋的博客,回复"666"获面试宝典推荐一个用Spring Boot搭建的文档在线预览解决方案: kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对 ...
WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
vue pdfjs 在线预览
下载pdfjs 官网:http://mozilla.github.io/pdf.js/getting_started/#download 放入项目中将下载下来的文件解压缩后,重命名为pdf,将里面的 ...
Linux环境_源码安装Unoconv实现文件在线预览doc，doxc，xls，xlsx，ppt，pptx 文件
因业务需求需要,用unoconv就可以轻松地实现利用LibOffice可以打开的文档的转换. 服务器版本环境系统版本 Linux Red Hat Enterprise Linux Server r ...
万能文件在线预览项目，开源！
支持 20 多种主流格式的文件在线浏览,这个项目值得学习. 编程导航开源仓库:https://github.com/liyupi/code-nav 大家好,我是鱼皮,今天分享一个优秀的.100% 开源 ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
Office文档在线预览/在线编辑解决方案 - 毕升OfficeAPI说明
毕升OfficeAPI说明毕升OfficeAPI集成.onlyoffice api集成使用毕升Office编辑,预览文件的过程 Api 具体说明 HMAC-MD5签名 callURL返回值如何检 ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...
vue移动端pdf在线预览，并实现手势缩放、移动
通常我们会遇到ios手机不能下载文件的问题,那是因为苹果手机的拦截机制,这时我们只能通过别的方法来解决问题,我这里的解决方法是直接实现在线预览 pdf预览跟图片预览不同,pdf可能会有多张,而图片只有 ...

github在线预览总结

github在线预览总结相关推荐

最新文章

热门文章